Advanced with Algolia

By Advanced we mean that you can use Meilisearch with other tools like Algolia Instantsearch

Setup

Activate instantSearch option in your nuxt.config.ts file.

nuxt.config.ts
meilisearch: {

  instantSearch: true,
  // or
  instantSearch: {
        theme: 'algolia'
      },
  ...
}

Theme valid options are satellite, reset or algolia.

All theme info on official page

useInstantSearch

Use this composable to get the client instance of Algolia InstantSearch.

<script setup>
const client = useInstantSearch()
</script>

Algolia Components

ALL Algolia components will be loaded and available in your app.

In your components, import Vue instantSearch like so

import {
  AisInstantSearch,
  AisHits,
  AisSearchBox,
} from 'vue-instantsearch/vue3/es'

Full Exemple

On your client side ( Front-end ), you can load Meilisearch client with composables.

<script setup>
import {
  AisInstantSearch,
  AisHits,
  AisSearchBox,
} from 'vue-instantsearch/vue3/es'

const client = useInstantSearch()

</script>

<template>
    <ais-instant-search
      :search-client="client"
      index-name="movies"
    >
      <ais-search-box
        placeholder="Search here…"
        class="searchbox"
      ></ais-search-box>
      <ais-hits>
        <template v-slot="{ items }">
          <ul>
            <li
              v-for="{ id,title,poster } in items"
              :key="id"
            >
              <h1>{{ title }}</h1>
              <img :src="poster" :alt="`Poster from ${title}`">
            </li>
          </ul>
        </template>
      </ais-hits>

    </ais-instant-search>
</template>
Table of Contents