Routing
Routing
Use the built-in Nuxt router adapter for InstantSearch state.
Nuxt Swiftsearch includes useAisRouter() to connect InstantSearch UI state with Nuxt route query params.
1) Enable deep query parsing
Install qs and configure your Nuxt router parser so nested UI state can be encoded/decoded.
app/router.options.ts
import type { RouterConfig } from "@nuxt/schema";
import qs from "qs";
export default <RouterConfig>{
parseQuery: qs.parse,
stringifyQuery: qs.stringify,
};
2) Attach router in InstantSearch configuration
SearchExperience.vue
<script setup lang="ts">
import { algoliasearch } from "algoliasearch";
import { singleIndex as singleIndexMapping } from "instantsearch.js/es/lib/stateMappings";
const searchClient = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76");
const algoliaRouter = useAisRouter();
const indexName = "instant_search";
const configuration = {
indexName,
searchClient,
routing: {
router: algoliaRouter.value.router,
stateMapping: singleIndexMapping(indexName),
},
};
</script>
This preserves search state in URLs and restores state on navigation or direct page load.