Getting Started

Setup

Add Nuxt-meilisearch into nuxt

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

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.js
export default defineNuxtConfig({
  ...
  modules: [
    'nuxt-meilisearch'
  ],
  ...

Basic Setup

Client Side only

The basic setup is to provide the host url and the search api key.

nuxt.config.js
  ...
  meilisearch: {
    hostUrl:  'http://my-meilisearch-server.domain.com' //reqired
    searchApiKey: '<your_search_key>' // reqired
  }
  ...
})

Advanced Setup

Client Side + Server Side

You can customization Meilisearch client meilisearchConfig.

Full documentation on Meiliserch client page for more details.

nuxt.config.js
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  ...
  modules: [
    'nuxt-meilisearch'
  ],
  meilisearch: {
    hostUrl:  'http://my-meilisearch-server.domain.com'
    searchApiKey: '<your_search_key>',
    adminApiKey: '<your_admin_key>',
    instantSearch: true, // default false
    serverSideUsage:  false// default false
  }
  ...
})