By Advanced we mean that you can use Meilisearch with other tools like Algolia Instantsearch
Activate instantSearch option in your nuxt.config.ts file.
meilisearch: {
instantSearch: true,
// or
instantSearch: {
theme: 'algolia'
},
...
}
Theme valid options are satellite, reset or algolia.
All theme info on official page
Use this composable to get the client instance of Algolia InstantSearch.
<script setup>
const client = useInstantSearch()
</script>
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'
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>