ais-instant-search
<ais-instant-search index-name="string" :search-client="object" // Optional parameters :on-state-change="function" :search-function="function" :stalled-search-delay="number" :routing="object" :initial-ui-state="object" :class-names="object" :insights="boolean|object" :insights-client="function" :future="{ preserveSharedStateOnUnmount: boolean, persistHierarchicalRootCount: boolean, }" />
1
2
3
4
5
6
7
8
9
import { AisInstantSearch } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisInstantSearch
},
// ...
};
1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.
About this widget
ais-instant-search
is the root wrapper component for all widgets.
Middleware
Vue InstantSearch provides middleware to help you connect to other systems:
- Insights. Use the
insights
middleware to send click and conversion events - Generic. With the
middleware
API, you can inject functionality into Vue InstantSearch. For example, to send events to Google Analytics.
Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<ais-instant-search
index-name="INDEX_NAME"
:search-client="searchClient"
>
<!-- Widgets -->
</ais-instant-search>
</template>
<script>
import { liteClient as algoliasearch } from 'algoliasearch/lite';
export default {
data() {
return {
searchClient: algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
),
};
},
};
</script>
Props
index-name
|
type: string
Required
The main index in which to search. |
||
Copy
|
|||
search-client
|
type: object
Required
Provides a search client to The client uses a cache to avoid unnecessary search operations, so you should use a stable reference to the same search client instance rather than creating a new one on each render. Avoid inlining the function call to |
||
Copy
|
|||
search-function
|
type: function
Optional
This option allows you to take control of search behavior. For example, to avoid doing searches at page load. When this option is set, A hook is called each time a search is requested (with Algolia’s helper API as a parameter).
Begin searching by calling When modifying the state of the helper within |
||
Copy
|
|||
on-state-change
|
type: function
Optional
Triggers when the state changes. This can be useful when performing custom logic on a state change. When using |
||
Copy
|
|||
stalled-search-delay
|
type: number
default: 200
Optional
A time period (in ms) after which the search is considered to have stalled. Read the slow network guide for more information. |
||
Copy
|
|||
routing
|
type: object
default: undefined
Optional
The router configuration used to save the UI state into the URL or any client-side persistence.
It’s either a
For more information, see Sync your URLs. You can’t use
|
||
Copy
|
|||
initial-ui-state
|
type: object
Optional
Adds a Replace |
||
Copy
|
|||
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
|||
insights
|
since: v4.9.0
type: boolean|object
default: false
Optional
Enables the Insights middleware and loads the |
||
Copy
|
|||
insights-client
|
Deprecated
type: function
Optional
Use This function is exposed by the |
||
Copy
|
|||
future
|
type: object
Optional
Test these new InstantSearch features without affecting others:
|
||
preserveSharedStateOnUnmount
|
since: v4.11.0
type: boolean
default: false
Optional
Changes the way If If |
||
Copy
|
|||
persistHierarchicalRootCount
|
since: v4.13.1
type: boolean
default: false
Optional
Whether to display a constant facet value count at the root of a hierarchical menu with active refinements. If If |
||
Copy
|
HTML output
1
2
3
<div class="ais-InstantSearch">
<!-- Widgets -->
</div>