Nearly-Pickled Module

    nuxt-meilisearch
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    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: {
       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.

    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>

    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

    Install

    npm i nuxt-meilisearch

    DownloadsWeekly Downloads

    145

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    10.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • xlanex6