meilisearch
Go to documentationMeilisearch Instant Search module for Nuxt 3
nuxt-meilisearch
Meilisearch module for Nuxt
Features
- Nuxt 3
- Easy integration with MeilisearchJS lib
- Support for Vue Algolia Vue 3 InstantSearch components (optional)
- Manage Meilisearch from Nuxt server side
⚠️⚠️⚠️ BREACKING 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-meilisearchAdd it to the modules section of nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({ modules: [ 'nuxt-meilisearch' ], meilisearch: { readApiKey: '<your_public_key>', writeApiKey: '<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.
Exemple:
<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.