Nuxt Swiftsearch
Getting Started

Declarative Transform

How Nuxt Swiftsearch compiles template widgets into connector arrays.

Nuxt Swiftsearch ships a Vite transform that converts declarative widget templates into the manual useAis* widget array expected by the SSR runtime.

What the transform does

  • Finds each <AisInstantSearch> root without an existing widgets binding.
  • Collects supported child widgets and <AisIndex> branches.
  • Injects a generated :widgets="..." computed binding.
  • Imports only the useAis* composables needed by that file.

Supported control flow

  • v-if, v-else-if, v-else branches are compiled to conditional array spreads.
  • <template v-if> wrappers are supported.
  • v-for on widget nodes is intentionally skipped (fallback to manual widgets for loops).

Ref/computed expression handling

Directive expressions used in props and conditions are normalized with automatic unref(...) support where needed.

This means ref-based props like :search-parameters="{ filters }" and branch conditions like v-if="showStats" work without manual .value access.

Automatic widget IDs

For widgets that support repeated instances (AisRefinementList, AisClearRefinements, AisCurrentRefinements, AisAutocomplete), the transform:

  • uses your explicit id when present, or
  • auto-injects a deterministic generated id in template markup.

Supported declarative widgets

AisAutocomplete, AisClearRefinements, AisConfigure, AisCurrentRefinements, AisHierarchicalMenu, AisHits, AisInfiniteHits, AisMenu, AisNumericMenu, AisPagination, AisQueryRuleCustomData, AisRangeInput, AisRatingMenu, AisRefinementList, AisSearchBox, AisSortBy, AisStats, AisToggleRefinement, AisIndex.

When transform is skipped

  • <AisInstantSearch> already has :widgets.
  • Unsupported dynamic structure (for example widget v-for).
  • Files importing from vue-instantsearch directly.

In all skip cases, you can keep using manual :widgets composition.

Copyright © 2026