meilisearch
Go to documentationMeilisearch Instant Search module for Nuxt 3
nuxt-meilisearch
Meilisearch module for Nuxt
Full documentation
Visit the module documentation site to see all features details.
Features
- Nuxt 3
- Easy integration with MeilisearchJS lib
- Support for Vue Algolia Vue 3 InstantSearch components (optional)
- Manage Meilisearch from Nuxt server side
⚠️⚠️⚠️ BREAKING CHANGE ON MODULE CONFIG From previous VERSION ⚠️⚠️⚠️
Due about the new feature of server MeilisearchJS client capability
Setup
Install nuxt-meilisearch !
npm install --save-dev nuxt-meilisearch // yarn add --dev nuxt-meilisearch
Add it to the modules section of nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: [
'nuxt-meilisearch'
],
meilisearch: {
hostUrl: 'http://my-meilisearch-server.domain.com',
searchApiKey: '<your_public_key>',
adminApiKey: '<your_secret_key>',
serverSideUsage: true,
instantSearch: {
theme: 'algolia'
}
})
Usage
You can load Meilisearch client with composables
<script setup>
const client = useMeilisearchClient()
</script>
Then is your template you can use all Algolia Vue 3 Instantsearch components.
example:
<template>
<div>
Nuxt module playground for nuxt-meilisearch !
<ais-instant-search
:search-client="client"
index-name="movies"
>
<ais-configure :hits-per-page.camel="10" />
<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>
</div>
</template>
Development
PR and ISSUES are welcome
- Run
npm run dev:prepareto generate type stubs. - Use
npm run devto start playground in development mode.