[](https://www.npmjs.com/package/nuxt-meilisearch) [](https://www.npmjs.com/package/nuxt-meilisearch) [](https://twitter.com/xlanex6)

Nuxt Meilisearch

Integrate Meilisearch fast and hyper-relevant search engine in your Nuxt application.

Read Nuxt Meilisearch documentation.

Features

• Nuxt 3 integration
• Auto-imported composables
• Server-side rendering support
• Client & server integration of Meilisearch
• Full TypeScript support
• Compatible with Instant Meilisearch
• Vue Algolia InstantSearch components (optional)

Installation

Add nuxt-meilisearch using the Nuxt CLI to your project

npx nuxi@latest module add nuxt-meilisearch

or add nuxt-meilisearch using your dependency manager

# with npm
npm install nuxt-meilisearch

# with yarn
yarn add nuxt-meilisearch

# with pnpm
pnpm add nuxt-meilisearch

and then to the modules section of nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-meilisearch'
  ],
  meilisearch: {
    hostUrl:  '<your_meilisearch_host>', //required
    searchApiKey: '<public_search_api_key>', // required
    adminApiKey: '<admin_api_key>', // optional
    serverSideUsage: true // default: false
})

That's it! 🎉

Usage

This example performs a search in the books index:

<script setup>
const { search, result } = useMeiliSearch('books')

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

<template>
  <div>
    {{ result }}
  </div>
</template>

Learn more in the Nuxt Meilisearch documentation.

Contributing

Issues and pull requests are welcome. 🫶

Local development

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

Licence

MIT Licence