🔎 Meilisearch module for Nuxt 3

Overview

xlanex6/nuxt-meilisearch

nuxt-meilisearch

Latest Stable Version License Twitter Follow


Meilisearch module for Nuxt

Features

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: '<YOUR_MEILISEARCH_HOST_URL>',
   apiKey: '<YOUR_MEILISEARCH_API_KEY>',
   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>

Roadmap

  • 🚧 Use Meilisearch client on Server side to manipulate index and documents.
  • 🚧 Use tree shacking to optimize Algolia components size
  • 🚧 WIP - Nice demo site

Development

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

Licence

MIT Licence

Comments
  • Failed to resolve component: ais-instant-search

    Failed to resolve component: ais-instant-search

    I've followed the provided instructions to the point, but still can't get this module to work with Nuxt3.

    My current very basic test-page looks like this:

    <script setup>
    const client = useMeilisearchClient()
    </script>
    
    <template>
      <ais-instant-search :search-client="client" index-name="publications">
        <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>
    </template>
    

    Is there something crucial missing? Any help would be appreciated.

    opened by bennyzen 9
  • Hits always show me 200 results. The clientOptions didn´t work.

    Hits always show me 200 results. The clientOptions didn´t work.

    Hi there, thanks for your module!

    I made something wrong? I'm trying to limit the results for 5 "hits" for the all project.

    image

    
    RootDir: /home/hermes/Projetos/cloud/meilisearch/nuxt                 16:52:10
    Nuxt project info:                                                    16:52:10
    
    ------------------------------
    - Operating System: `Linux`
    - Node Version:     `v16.15.0`
    - Nuxt Version:     `3.0.0`
    - Nitro Version:    `1.0.0`
    - Package Manager:  `[email protected]`
    - Builder:          `vite`
    - User Config:      `modules`, `meilisearch`
    - Runtime Modules:  `[email protected]`
    - Build Modules:    `-`
    ------------------------------
    
    opened by hermesalvesbr 4
  • Nomenclature of key vars

    Nomenclature of key vars

    Maybe it's just me, but I'm somehow confused about the new names for the API keys (readApiKey, writeApiKey).

    When asking Meili for its actual keys, we'll get an answer like:

    ...
    {
    	...
    	"description": "Default Search API Key (Use it to search from the frontend)",
    	"key": "a1f03dd617bdf279da6fbcea48fe29e981f0d0165c6d534cc86a36437d3fc",
    	...
    },
    {
    	...
    	"description": "Default Admin API Key (Use it for all other operations. Caution! Do not use it on a public frontend)",
    	"key": "b915eac917a92d956a6458a92f572bcdf07b41d82c7532b82eca217dda83d",
    	...
    }
    ...
    

    So, from my point of view the vars should adapt the naming scheme given by Meili itself (maybe searchApiKey and adminApiKey). Please correct me if I'm wrong. And yes, it's really just a detail.

    opened by bennyzen 4
  • "ais-refinement-list" not showing anything

    Hello there,

    Thanks for the awesome plugin. I have a problem when I use "ais-refinement-list" It doesn't show anything. Even after importing the module.

    import {
        AisInstantSearch,
        AisConfigure,
        AisHits,
        AisSearchBox,
        AisRefinementList,
      } from 'vue-instantsearch/vue3/es';
    

    Thanks. Nuwan T.

    opened by nuwanz 4
  • Feat: add a MS instance for the playground

    Feat: add a MS instance for the playground

    Motivation

    Before digging in Nuxt3 abilities, I wanted to work first with a reproductible playground + a dedicated documentation.

    This quick setup might be useful in a CI/CD process.

    Looking forward to have your feedback!

    opened by VivianSolide 3
  • useMeilisearchClient is not defined

    useMeilisearchClient is not defined

    The current version does not seem to work with Nuxt v3.0.0.

    Here's a quick example/reproduction on StackBlitz:

    https://stackblitz.com/edit/nuxt-starter-r2ikbg?file=app.vue

    opened by bennyzen 2
  • Meili below v0.27 does not support `highlightPreTag`

    Meili below v0.27 does not support `highlightPreTag`

    MeiliSearch below version 0.27 does not seem to understand or support the highlightPreTag. The error I got is something like:

    {
        "message": "Json deserialize error: unknown field `highlightPreTag`, expected one of `q`, `offset`, `limit`, `attributesToRetrieve`, `attributesToCrop`, `cropLength`, `attributesToHighlight`, `matches`, `filter`, `sort`, `facetsDistribution` at line 1 column 55",
        "code": "bad_request",
        "type": "invalid_request",
        "link": "https://docs.meilisearch.com/errors#bad_request"
    }
    

    Maybe this could be added to the docs to save some headaches.

    opened by bennyzen 2
  • Could not find a declaration file for module 'vue-instantsearch/vue3/es'

    Could not find a declaration file for module 'vue-instantsearch/vue3/es'

    Hi there, thanks for your module!

    How to solve this error message: Could not find a declaration file for module 'vue-instantsearch/vue3/es'. 'D:/code/nuxt/test/testb/node_modules/.pnpm/[email protected]/node_modules/vue-instantsearch/vue3/es/index.js' implicitly has an 'any' type.ts(7016)

    meilisearch in demo could run, but has this error message

    vue-instantsearch

    nuxt3 : 3.0.0 nuxt-meilisearch : 0.1.7 meilisearch : 0.30.2

    opened by buluw 1
  • Sorting with the module

    Sorting with the module

    Hi there,

    When I make curl queries (or directly in the browser via params in the url ex: "localhost:7700/indexes/recettes/search/?sort=last_update:desc"), I manage to use sorting. However, using this module, I can't seem to find in the documentation how to do it.

    Thank for your help.

    nuxt3 : 3.0.0 meilisearch : 0.29.2 nuxt-meilisearch : 0.1.6

    Best Regards, Hervé

    opened by airv-b 2
Owner
Alex Duval
Bullshit FREE // VueJS + Nuxt Fan boy // GraphQL addict // JAMstack evangelist // Outdoor sport player // Less IS more way of life
Alex Duval
🔎 Algolia module for Nuxt

@nuxtjs/algolia Algolia module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Algolia Handy composable

Nuxt Community 128 Jan 7, 2023
Nuxt 3 module for Kirby's Query Language API

nuxt-kql Kirby KQL module for Nuxt 3. This module provides a useKql composable, which under the hood uses useFetch. Thus, KQL query fetching in your N

Johann Schopplich 25 Dec 15, 2022
Nuxt 3 module for Web3.js

nuxt-web3.js Nuxt 3 module for Web3.js. Installation npm install nuxt-web3.js Usage export default defineNuxtConfig({ modules: ['nuxt-web3.js'], })

Robert Soriano 8 Dec 16, 2022
OpenID-Connect(OIDC) integration module for nuxt 3.0.

Nuxt OpenID-Connect OpenID-Connect(OIDC) integration module for nuxt 3.0. Features An Nuxt 3 module. OIDC integration ( implemetation base openid-clie

Aborn Jiang 10 Dec 24, 2022
✉️ Nuxt module for first class integration with popular newsletter providers

nuxt-newsletter Newsletter module for Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Mailchimp, Revue, B

Jakub Andrzejewski 39 Jan 5, 2023
🔎 Algolia module for Nuxt

@nuxtjs/algolia Algolia module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Algolia Handy composable

Nuxt Community 91 Jul 28, 2022
A Nuxt.js module that injects a server route to serve the GraphQL Playground

@pin-pon/nuxt-graphql-playground A Nuxt.js module that injects a server route to serve the GraphQL Playground Setup Add @pin-pon/nuxt-graphql-playgrou

Pin-Pon 3 Sep 22, 2022
🪅 Nuxt 3 module to connect with any API securely – server proxy & customizable composable names

nuxt-api-party This module provides composables to fetch data from an API of your choice securely. You can customize the composable names! Given json-

Johann Schopplich 65 Dec 26, 2022
Nuxt-Module, that provides a system to set shopware cache-tags for later use in e.g. a full-page cache

nuxt-shopware-caching Nuxt-Module, that provides a system to set shopware cache-tags for later use in e.g. a full-page cache. This module is meant to

Mothership GmbH 5 Nov 8, 2022
⚡️ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Dizzy 245 Dec 27, 2022
Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 📋

nuxt-social-tags Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt3 ready Composables

Conner 19 Dec 17, 2022
Easily connect your Nuxt 3 application with LogSnag 📰

Nuxt LogSnag ?? LogSnag integration for Nuxt 3 ✨ Release Notes Features Nuxt 3 ready Easy integration Handy composables TypeScript support Setup Insta

Conner 13 Apr 28, 2022
Nuxt 3 starter with Algolia, Storyblok, and Indexer

Nuxt 3 with Storyblok CMS and Algolia Search (incl. automatic indexing) This is a demo repository for an article in Dev.to. We recommend to look at th

Jakub Andrzejewski 5 May 24, 2022
End-to-end typesafe APIs with tRPC.io in Nuxt applications.

tRPC-Nuxt End-to-end typesafe APIs with tRPC.io in Nuxt applications. The client above is not importing any code from the server, only its type declar

Robert Soriano 231 Dec 30, 2022
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free • Open Source • Notification View Demo · Report Bug · Requ

zernonia 208 Dec 27, 2022
This repo contains a fully configured nuxt 3 instance supporting TypeScript and several considered as useful libraries, fully configured and ready to use in real world projects!

Nuxt 3 Starter This repo contains a fully configured nuxt 3 instance supporting TypeScript and several considered as useful libraries, fully configure

Ali Soueidan 26 Dec 27, 2022
Batteries-included, zero-config Ionic integration for Nuxt

Nuxt Ionic Ionic integration for Nuxt ✨ Changelog ?? Read the documentation ▶️ Online playground Features ⚠️ nuxt-ionic is currently a work in progres

Daniel Roe 211 Dec 28, 2022
Http-proxy middleware for Nuxt 3.

nuxt-proxy Http-proxy middleware for Nuxt 3. Installation npm install nuxt-proxy Usage export default defineNuxtConfig({ modules: ['nuxt-proxy'],

Robert Soriano 49 Dec 30, 2022
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free • Open Source • Notification View Demo · Report Bug · Requ

StatusBase 194 Jul 5, 2022