> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-index

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

```vue Signature theme={"system"}
<ais-index
  index-name="string"
  // Optional parameters
  index-id="string"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisIndex } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisIndex,
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-index" horizontal>
  Preview this widget and its behavior.
</Card>

## 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](/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/vue).

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 Vue icon=code theme={"system"}
<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`](/doc/api-reference/widgets/search-box/vue) widgets or
two [`ais-refinement-list`](/doc/api-reference/widgets/refinement-list/vue) widgets on the same attribute.
In that case, the latter takes precedence and overrides the search parameters.

```vue Vue icon=code theme={"system"}
<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 Vue icon=code theme={"system"}
<ais-index index-name="instant_search">
  <!-- Add widgets -->
</ais-index>
```

## Options

<ParamField body="index-name" type="string" required>
  The index to search into.

  ```vue Vue icon=code theme={"system"}
  <ais-index index-name="instant_search" />
  ```
</ParamField>

<ParamField body="index-id" type="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`](/doc/api-reference/widgets/instantsearch/vue#param-routing).
  It lets you find the refinements that match an `index` widget.

  ```vue Vue icon=code theme={"system"}
  <ais-index
    // ...
    index-id="instant_search_one"
  />
  ```
</ParamField>