Composables

useAis* connector composables

Reference for the manual-mode widget factories that pair with each component.

Every component shipped under <AisXxx> has a matching useAisXxx(params, widgetId?) factory. The factory returns an InstantSearch widget you can drop into the :widgets array on <AisInstantSearch>.

In declarative mode the transform calls these for you. You only need them when you build the widget array manually (:widgets), or when you want to share one connector across multiple component instances.

Common signature

useAisXxx(
  widgetParams: ConnectorParams,
  widgetId?: string, // optional — required to share state between component instances
): InstantSearchWidget

The widgetId argument scopes the connector via provide/inject. Pass the same string to the matching component's id prop to bind them.

When to pass a `widgetId`

Repeating the same connector with shared state — register one factory call with a widgetId and pass id="..." to each component.
Repeating the same connector with separate state — register one factory per component, each with a unique widgetId, and match them on the component's id.
Single instance — leave widgetId empty; the component falls back to a composable-level render-state map keyed by attribute.

Available factories

Factory	Component	Notes
`useAisAutocomplete`	`<AisAutocomplete>`	Multi-index autocomplete state.
`useAisBreadcrumb`	`<AisBreadcrumb>`	Trail of refined hierarchy levels.
`useAisClearRefinements`	`<AisClearRefinements>`	Reset action.
`useAisConfigure`	`<AisConfigure>`	Forwards `searchParameters`.
`useAisConfigureRelatedItems`	`<AisConfigureRelatedItems>`	Related-items search params.
`useAisCurrentRefinements`	`<AisCurrentRefinements>`	Active refinements list.
`useAisDynamicWidgets`	`<AisDynamicWidgets>`	Server-driven widget set.
`useAisHierarchicalMenu`	`<AisHierarchicalMenu>`	Hierarchy refinement.
`useAisHits`	`<AisHits>`	Insights-enabled.
`useAisHitsPerPage`	`<AisHitsPerPage>`	Page-size selector.
`useAisInfiniteHits`	`<AisInfiniteHits>`	Insights-enabled, paginated cache.
`useAisMenu`	`<AisMenu>`, `<AisMenuSelect>`	Both components share this connector.
`useAisNumericMenu`	`<AisNumericMenu>`	Range presets.
`useAisPagination`	`<AisPagination>`	Page navigation.
`useAisPoweredBy`	`<AisPoweredBy>`	Branding link.
`useAisQueryRuleContext`	`<AisQueryRuleContext>`	Rule context bag.
`useAisQueryRuleCustomData`	`<AisQueryRuleCustomData>`	Rule payload.
`useAisRangeInput`	`<AisRangeInput>`	Min/max numeric input.
`useAisRatingMenu`	`<AisRatingMenu>`	Star rating selector.
`useAisRefinementList`	`<AisRefinementList>`	Faceted refinement.
`useAisRelevantSort`	`<AisRelevantSort>`	Virtual replica toggle.
`useAisSearchBox`	`<AisSearchBox>`	Query input.
`useAisSortBy`	`<AisSortBy>`	Replica index selector.
`useAisStats`	`<AisStats>`	Result counts.
`useAisToggleRefinement`	`<AisToggleRefinement>`	Boolean filter.
`useAisVoiceSearch`	`<AisVoiceSearch>`	Browser SpeechRecognition wrapper (SSR-safe stub).

Usage

pages/search.vue

<script setup lang="ts">
const widgets = computed(() => [
  useAisSearchBox({}),
  useAisStats({}),
  useAisRefinementList({ attribute: "brand", showMore: true }, "brand-search"),
  useAisInfiniteHits({ showPrevious: true }),
]);
</script>

<template>
  <AisInstantSearch :configuration="configuration" :widgets="widgets">
    <AisSearchBox />
    <AisStats />
    <AisRefinementList attribute="brand" id="brand-search" />
    <AisInfiniteHits :show-previous="true" />
  </AisInstantSearch>
</template>

Caches

useAisInfiniteHits accepts a cache option in its widget params; useAisInfiniteHitsStatefulCache is exported as a Nuxt-friendly default that survives navigation.

useAisWidget — counterpart that reads the state on the component side.
Manual widgets mode — full setup with :widgets.
Declarative transform — when you don't need to call these directly.

Edit this pageorReport an issue

useAisIndex

Build a nested index widget with auto-scoped child connectors.

Roadmap

Ongoing work and improvements.