API Reference / Vue InstantSearch Widgets / ais-instant-search
Aug. 23, 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"
  :insights-client: function
/>

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

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.

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.

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.

1
2
3
4
5
6
<ais-instant-search
  [...]
  :stalled-search-delay="1000"
>
  <!-- Widgets -->
</ais-instant-search>
routing
type: object
default: undefined
Optional

The router configuration used to save the UI state into the URL, or any client-side persistence. You can find more information in the routing guide. The object is accepted if it has either of these keys:

  • router: object: this object is the part that saves the UI state. By default, it uses an instance of the history with the default parameters. It accepts:
    • onUpdate: function: adds an event listener that makes InstantSearch aware of external changes to the storage medium (e.g. the URL). Typically you’ll set up a listener for popstate, which triggers a callback with the current routeState.
    • read: function: reads the routing storage and gets a route object. It doesn’t take any parameters, and returns an object.
    • write: function: pushes a route object into a routing storage. Takes the UI state from the state mapping.
    • createURL: function: transforms a route object into a URL. It receives an object and returns a string (which may be empty).
    • dispose: function: cleans up all event listeners.

  • stateMapping: object: transforms the uiState into the object that is saved by the router. The default value is provided by simple. It accepts:
    • stateToRoute: function: transforms a uiState representation into a route object. It receives an object that contains the UI state of all the widgets in the page. It can return any object that is readable by routeToState.
    • routeToState: function: transforms a route object into a uiState representation. It receives an object that contains the UI state stored by the router. It can return any object that is readable by stateToRoute.
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.
1
2
3
4
5
6
7
8
<ais-instant-search
  [...]
  :class-names="{
    'ais-InstantSearch': 'MyCustomInstantSearch',
  }"
>
  <!-- Widgets -->
</ais-instant-search>
insights-client
type: function
Optional

The function exposed by the search-insights (usually window.aa). This is needed if you want to send click and conversion events with InstantSearch.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <ais-instant-search
    [...]
    :insights-client="insightsClient"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
  export default {
    data() {
      return {
        // ...
        insightsClient: window.aa
      };
    }
  };
</script>

HTML output

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

Did you find this page helpful?