Examples
Route-driven Filters
Build filters from dynamic route segments with `AisConfigure`.
This matches the playground catch-all example (/test/[...catchall]) where route params feed Algolia filters.
pages/test/[...catchall].vue
<template>
<AisInstantSearch :configuration="configuration" instance-key="catchall">
<AisConfigure
:search-parameters="{
filters,
distinct: true,
}"
/>
<AisSearchBox />
<AisRefinementList attribute="brand" searchable :show-more="true" />
<AisRangeInput attribute="price" />
<AisToggleRefinement attribute="free_shipping" />
<AisInfiniteHits :show-previous="true" :cache="infiniteHitsCache" />
</AisInstantSearch>
</template>
<script setup lang="ts">
import { algoliasearch } from "algoliasearch";
const route = useRoute();
const brand = computed(() => String(route.params.catchall?.[0] || "Apple"));
const filters = computed(() => `brand:${brand.value}`);
const client = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76");
const algoliaRouter = useAisRouter();
const infiniteHitsCache = useAisInfiniteHitsStatefulCache("catchall");
const configuration = {
indexName: "instant_search",
searchClient: client,
routing: algoliaRouter.value,
};
</script>
This pattern is useful for branded landing pages, campaign pages, or category-driven routes.