useAisIndex

useAisIndex({ indexName, indexId? }) wraps InstantSearch's index widget and rewires its addWidgets so child widgets inherit the right index scope automatically.

Use it when you compose widgets manually (:widgets="..."); the declarative transform handles the same wiring through <AisIndex>.

Signature

useAisIndex(params: IndexWidgetParams): IndexWidget

IndexWidgetParams has at minimum indexName: string; pass indexId when two index branches target the same physical index but must keep their state separate.

Usage

<script setup lang="ts">
const airbnbIndex = useAisIndex({ indexName: "airbnb" });

airbnbIndex.addWidgets([
  useAisInfiniteHits({}),
  useAisRefinementList({ attribute: "city" }, "airbnb-city"),
]);

const widgets = computed(() => [
  useAisSearchBox({}),
  useAisHits({}),
  airbnbIndex,
]);
</script>

<template>
  <AisInstantSearch :configuration="configuration" :widgets="widgets">
    <AisSearchBox />
    <AisHits />

    <AisIndex index="airbnb">
      <AisInfiniteHits />
      <AisRefinementList attribute="city" id="airbnb-city" />
    </AisIndex>
  </AisInstantSearch>
</template>

What index scoping does

Every widget added through the rewired addWidgets receives a call to its $$setIndexScope(indexId) hook. This is what makes useAisWidget(...) inside descendant components inject the right per-index state — without it, two <AisIndex> blocks pointing at the same indexName would silently share refinements.

Related

• <AisIndex> — declarative form of the same primitive.
• Multi-index isolation — full example with sibling <AisIndex> blocks.