Learn Nuxt with a Collection of 100+ Tips!

meilisearch
meilisearch

Meilisearch Instant Search module for Nuxt

xlanex6/nuxt-meilisearch

Latest Stable Version LicenseTwitter Follow

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

Install nuxt-meilisearch:

# with npm
npm install nuxt-meilisearch

# with yarn
yarn add nuxt-meilisearch

# with pnpm
pnpm add nuxt-meilisearch

!WARNING v1.0 introduced a breaking change on the module configuration options.

Then, update your 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
})

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