meilisearch

Meilisearch Instant Search module for Nuxt 3

xlanex6/nuxt-meilisearch

nuxt-meilisearch

Latest Stable Version License Twitter Follow


Meilisearch module for Nuxt

Full documentation

Visit the module documentation site to see all features details.

Features

⚠️⚠️⚠️ 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-meilisearch

Add it to the modules section of nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({ modules: [   'nuxt-meilisearch' ], meilisearch: {   hostUrl:  'http://my-meilisearch-server.domain.com'   searchApiKey: '<your_public_key>',   adminApiKey: '<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.

example:

<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:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.

Licence

MIT Licence