Examples
Multi-index Isolation
Isolate repeated widgets across sibling indices using `indexId`.
When multiple <AisIndex> sections use identical widgets, set an explicit index-id to isolate connector state.
pages/index.vue
<AisInstantSearch :configuration="configuration">
<section>
<h3>Index 1</h3>
<AisIndex index="airbnb">
<AisRefinementList attribute="city" />
<AisClearRefinements id="bnb" />
<AisInfiniteHits />
</AisIndex>
</section>
<section>
<h3>Index 2 (isolated)</h3>
<AisIndex index="airbnb" index-id="bnb2">
<AisConfigure :search-parameters="{ filters: 'city:Chicago' }" />
<AisRefinementList attribute="city" />
<AisClearRefinements id="bnb" />
<AisInfiniteHits />
</AisIndex>
</section>
</AisInstantSearch>
Why this matters:
- both indices can use the same widget IDs (
id="bnb"), - refinements stay scoped per index,
- state does not leak between sibling index trees.