Usage - Nuxt Swiftsearch

The starting point

Create your wrapper component by passing widgets and the instantsearch configuration to the AisInstantSearch wrapper component, then use actual widgets anywhere inside the wrapper!

MySearchExperience.vue

<template>
  <div>
    <AisInstantSearch :widgets :configuration>
      <AisInfiniteHits />
      <AisRefinementList attribute="brand" searchable />
    </AisInstantSearch>
  </div>
</template>

<script setup lang="ts">
import algoliasearch from "algoliasearch";
import { createFetchRequester } from "@algolia/requester-fetch";

const client = algoliasearch("latency", "6be0576ff61c053d5f9a3225e2a90f76", {
  requester: createFetchRequester(),
});

const widgets = computed(() => [
  useAisInfiniteHits({
    showPrevious: true,
  }),
  useAisRefinementList({
    attribute: "brand",
    showMore: true,
  }),
]);

const configuration = ref({
  indexName: "instant_search",
  searchClient: client,
});
</script>

⚠️ To avoid SSR errors, due to the fact that algoliasearch client default requester is based on XMLHttpRequest, use the Fetch requester as shown above (e.g.: Cloudflare), be wary to install @algolia/requester-fetch@4.*

Out of the box routing

If you want, you can use the provided router out of the box, take a look at the Routing section

Installation

Routing

Nuxt Swiftsearch provide an out of the box routing implementation