ais-index

Scopes a group of widgets to a specific index in multi-index search interfaces.

Signature

<ais-index
  index-name="string"
  // Optional parameters
  index-id="string"
/>

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

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

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

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

About this widget

This widget lets you apply widgets to a specific index.

It’s useful when building interfaces that target multiple indices such as federated searches.

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

Vue

<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-box widgets or two ais-refinement-list widgets on the same attribute. In that case, the latter takes precedence and overrides the search parameters.

Vue

<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

Vue

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

Options

index-name · string · required

The index to search into.

Vue

<ais-index index-name="instant_search" />

index-id · string · default: "value provided for index-name"

An identifier for the index widget.

Providing an indexId lets different index widgets target the same Algolia index. It’s helpful for routing. It lets you find the refinements that match an index widget.

Vue

<ais-index
  // ...
  index-id="instant_search_one"
/>