middleware
<ais-instant-search index-name="instant_search" :search-client="searchClient" :middlewares="middlewares" > <!-- Widgets --> </ais-instant-search>
About this widget
The middleware
function returns an object with onStateChange
, subscribe
, and unsubscribe
functions.
The middleware
function doesn’t perform any actions itself but allows you to inject functionality into Vue InstantSearch:
- For example, you can send events to Google Analytics
- To send click and conversion events, use the
insights
middleware.
Requirements
Vue InstantSearch v3.7.0 or later.
Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
<ais-instant-search
index-name="instant_search"
:search-client="searchClient"
:middlewares="middlewares"
>
<!-- Widgets -->
</ais-instant-search>
</template>
<script>
function middleware({ instantSearchInstance }) {
return {
onStateChange({ uiState }) {
// Do something with `uiState` every time the state changes.
},
subscribe() {
// Do something when the InstantSearch instance starts.
},
unsubscribe() {
// Do something when the InstantSearch instance is disposed of.
}
}
}
export default {
data() {
return {
// ...
middlewares: [middleware]
}
}
}
</script>
Options
instantSearchInstance
|
type: object
Required
You have access to the instance of |
||
Copy
|
Hooks
onStateChange
|
type: ({ uiState }) => void
Required
This function is called with |
||
Copy
|
|||
subscribe
|
type: () => void
Required
This function is called when the InstantSearch instance starts (when |
||
Copy
|
|||
unsubscribe
|
type: () => void
Required
This function is called when the InstantSearch instance is disposed of. You can clean up anything you initiated in the |
||
Copy
|