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. Check out setup docs here

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>