Nuxt Swiftsearch Routing
Routing
Nuxt Swiftsearch provide an out of the box routing implementation
Preparation
In order for Vue Router to be able to digest deep queries, install qs and implement it like so in the app/router.options.ts file in your project:
app/router.options.ts
import type { RouterConfig } from "@nuxt/schema";
import qs from "qs";
// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig>{
parseQuery: qs.parse,
stringifyQuery: qs.stringify,
};
Usage
Inject the default router configuration in your instant search config prop
MySearchExperience.vue
<template>
<div>
<AisInstantSearch :widgets :configuration> </AisInstantSearch>
</div>
</template>
<script setup lang="ts">
import algoliasearch from "algoliasearch";
const client = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76");
const algoliaRouter = useAisRouter();
const configuration = ref({
indexName: "instant_search",
routing: algoliaRouter.value,
searchClient: client,
});
</script>