UI libraries / Vue InstantSearch / Widgets

ais-index

Signature 
<ais-index
  index-name="string"
  // Optional parameters
  index-id="string"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisIndex } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisIndex
  },
  // ...
};

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.

See code examples
See live example

About this widget

This widget lets you apply widgets to a specific index. This is useful when you want to build an interface that targets multiple indices.

You can learn more about this pattern, called “Federated Search”, in the guides on multi-index search.

The position of index in the widgets tree impacts which search parameters apply. Widgets that create search parameters forward them to their child index widgets.

Copy 
1
2
3
4
5
6
7
8

<ais-instant-search index-name="instant_search">
  <ais-search-box />
  <ais-hits />
  <ais-index index-name="media">
    <!-- The index inherits from the parent's `searchBox` search parameters -->
    <ais-hits />
  </ais-index>
</ais-instant-search>

The only exception to this rule is when two widgets own the same part of your UI state, like two ais-search-boxes or two ais-refinement-lists on the same attribute. In that case, the latter takes precedence and overrides the search parameters.

Copy 
1
2
3
4
5
6
7
8
9

<ais-instant-search index-name="instant_search">
  <ais-search-box />
  <ais-hits />
  <ais-index index-name="media">
    <!-- The index does not inherit from the parent's `searchBox` search parameters -->
    <ais-search-box />
    <ais-hits />
  </ais-index>
</ais-instant-search>

The same rule applies when you nest multiple index widgets.

Examples

Copy 
1
2
3

<ais-index index-name="instant_search">
  <!-- Add widgets -->
</ais-index>

Options

Parameter Description
index-name
type: string
Required

The index to search into.
Copy 
1

<ais-index index-name="instant_search" />
index-id
type: string
default: value provided for index-name
Optional

An identifier for the index widget. Providing an indexId allows different index widgets to target the same Algolia index. It’s especially useful for the routing feature, and lets you find the refinements that match an index widget.
Copy 
1
2
3
4

<ais-index
  // ...
  index-id="instant_search_one"
/>
Did you find this page helpful?
Vue InstantSearch v4