Vue Instantsearch

Using with Vue-Instantsearch components

By default, Algolia module only provides the search functionality but you can enable the vue-instantsearch components support to have Vue 3 components ready to serve as search and result components.

In order to enable them, first add instantSearch configuration option to module configuration:

import { defineNuxtConfig } from 'nuxt3'export default defineNuxtConfig({  modules: ['@nuxtjs/algolia'],  algolia: {    apiKey: process.env.ALGOLIA_SEARCH_API_KEY,    applicationId: process.env.ALGOLIA_APPLICATION_ID,    instantSearch: {      theme: 'algolia'    }  }})

You can choose a theme from satellite, reset, and algolia

Next, let's create indexName variable, call useAlgolia composable in page.vue script section to get the reference to Algolia, and import Vue Instantsearch components:

<script lang="ts" setup>const indexName = 'test_index' const algolia = useAlgoliaRef()import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'</script>

Finally, let's use it in our page.vue template section with vue-instantsearch components:

<template>  <div>    <ais-instant-search :index-name="indexName" :search-client="algolia">      <ais-search-box />      <ais-hits />    </ais-instant-search>  </div></template>

Using vue-instantsearch with SSR

Server-side rendering requires a few extra steps. First, extract instantsearch instance from the mixin and provide it to all vue-instantsearch components:

import { createServerRootMixin } from 'vue-instantsearch/vue3/es'import { renderToString } from 'vue/server-renderer'const serverRootMixin = ref(  createServerRootMixin({    searchClient: algolia,    indexName,  }),)const { instantsearch } ='$_ais_ssrInstantSearchInstance', instantsearch)

Then load the results using useAsyncData and hydrate them on the client:

onBeforeMount(() => {  // Use data loaded on the server  if (algoliaState.value) {    instantsearch.hydrate(algoliaState.value)  }})const { data: algoliaState } = await useAsyncData('algolia-state', async () => {    if (process.server) {        const nuxtApp = useNuxtApp();        nuxtApp.$algolia.transporter.requester = (            await import('@algolia/requester-node-http').then(                (lib) => lib.default || lib            )        ).createNodeHttpRequester();    }    return instantsearch.findResultsState({        // IMPORTANT: a component with access to `this.instantsearch` to be used by the createServerRootMixin code        component: {            $options: {                components: {                    AisInstantSearchSsr,                    AisIndex,                    AisConfigure,                    AisRefinementList,                    AisHits,                    AisHighlight,                    AisSearchBox,                    AisStats,                    AisPagination,                },                data() {                    return { instantsearch };                },                provide: { $_ais_ssrInstantSearchInstance: instantsearch },                render() {                    return h(AisInstantSearchSsr, null, () => [                        // Include any vue-instantsearch components that you use including each refinement attribute                        h(AisHits),                    ]);                },            },        },        renderToString,    });})

You can also check out the following Stackblitz link with the usage of above approach in SSR: