atinux / nuxt-meilisearch

Meilisearch module for Nuxt 3

nuxt-meilisearch

---

Meilisearch module for Nuxt

Features

• Nuxt 3
• Easy integration with MeilisearchJS lib
• Support for Vue Algolia Vue 3 Instantsearch components ( optional )

Setup

Install nuxt-meilisearch !

npm install nuxt-meilisearch  // yarn add nuxt-meilisearch

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

{
...
 modules: [
   'nuxt-meilisearch'
 ],
 meilisearch: {
   hostUrl: '<YOUR_MEILISEARCH_HOST_URL>',
   apiKey: '<YOUR_MEILISEARCH_API_KEY>',
   instantSearch: true // default true
 }
 ...
}

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.

Exemple:

<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>

Roadmap

• Init - Open github repo
• Main Meilisearch JS client
• Load options in single object
• Move inject via composables instead of plugin
• Conditional algolia vue3 lib , default true
• Publish NPM
• Use client from SERVER side to manipulate items
• Nice demo site
  • meilisearch instance from cloud
  • publish on netlify
• Create Docs site ( docus ) then publish
• Demo on StackBlitz for quick hack

Development

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

Licence

MIT Licence