API Reference / Vue InstantSearch Widgets / ais-instant-search
Apr. 24, 2019

ais-instant-search

Widget signature 
<ais-instant-search
  index-name="string"
  :search-client="object"
  // Optional parameters
  :stalled-search-delay="number"
  :routing="object"
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-instant-search widget is a wrapper that allows you to configure the credentials for the search. This component automatically provides the search state to all its children.

Note that every other Vue InstantSearch widgets must be wrapped under this one.

Examples

Copy
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="instant_search"
    :search-client="searchClient"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
  import 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
1
2
3
4
5
6

<ais-instant-search
  [...]
  index-name="instant_search"
>
  <!-- Widgets -->
</ais-instant-search>
search-client
type: object
Required

Provides a search client to ais-instant-search. To implement a custom search client, take a look at a the custom back-end guide.
Copy
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
    [...]
    :search-client="searchClient"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
  import algoliasearch from 'algoliasearch/lite';

  export default {
    data() {
      return {
        searchClient: algoliasearch(
          'YourApplicationID',
          'YourSearchOnlyAPIKey'
        ),
      };
    }
  };
</script>
stalled-search-delay
type: number
default: 200
Optional

The amount of time before considering that the search is stalled. You can find more information in the slow network guide.
Copy
1
2
3
4
5
6

<ais-instant-search
  [...]
  :stalled-search-delay="1000"
>
  <!-- Widgets -->
</ais-instant-search>
routing
type: object
Optional

Enables the routing feature to synchronize the search with the URL. More advanced usage is documented inside the routing guide.
Copy
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

<template>
  <ais-instant-search
    [...]
    :routing="routing"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
  import { history } from 'instantsearch.js/es/lib/routers';
  import { simple } from 'instantsearch.js/es/lib/stateMappings';

  export default {
    data() {
      return {
        // ...
        routing: {
          router: history(),
          stateMapping: simple(),
        },
      };
    }
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-InstantSearch: the root of the widget.
Copy 
1
2
3
4
5
6
7
8

<ais-instant-search
  [...]
  :class-names="{
    'ais-InstantSearch': 'MyCustomInstantSearch',
  }"
>
  <!-- Widgets -->
</ais-instant-search>

HTML output

Copy
1
2
3

<div class="ais-InstantSearch">
  <!-- Widgets -->
</div>

Did you find this page helpful?

Vue InstantSearch v2