Dashboard template with Vue & UI Pro

meilisearch
meilisearch

Meilisearch Instant Search module for Nuxt

xlanex6/nuxt-meilisearch

nuxt-meilisearch

Latest Stable Version LicenseTwitter Follow


Meilisearch module for Nuxt

Full documentation

Visit the module documentation site to see all features details.

Features

  • Full Nuxt 3 integration
  • Auto Import composables useMeiliSearch and useAsyncMeiliSearch for SSR usage
  • Manage Meilisearch from Nuxt server side
  • Full TypeScript support
  • Easy integration with MeilisearchJS lib
  • Support for Vue Algolia InstantSearch components (optional)

⚠️⚠️⚠️ BREAKING CHANGE ON MODULE CONFIG From previous VERSION ⚠️⚠️⚠️

Version 1.0.0 of this module introduce a breaking change on the module config.

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

nuxt.config.ts
export default defineNuxtConfig({
 modules: [
   'nuxt-meilisearch'
 ],
 meilisearch: {
   hostUrl:  'http://my-meilisearch-server.domain.com', //required
   searchApiKey: '<your_public_key>', // required
   adminApiKey: '<your_secret_key>', // optional
   serverSideUsage: true // default false
})

Usage

You can load Meilisearch client with composables

pages/index.vue
<script setup>
const { search, result } = useMeiliSearch('books') // `books` is the index name

onMounted(async () => {
  await search('harry');
})
</script>

Development

PR and ISSUES are welcome

  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.

Licence

MIT Licence