nuxt-meilisearch - GitLite

KO | EN

gitlite — search

#javascript #ai #llm #android #deep-learning #linux #macos #windows #awesome #kubernetes #vue #security #openai #open-source

nuxt-meilisearch

(★ 122)

🔎 Meilisearch module for Nuxt 3

File Explorer

Download Latest Version (.zip)

- - suite_tests_nuxt-meilisearch_1f40e4d7.plan.md
- - ci.yml
  - release.yml
- - index.md
- - favicon.ico
  - mountains.webp
- .gitignore
- .npmrc
- app.config.ts
- nuxt.config.ts
- package.json
- pnpm-lock.yaml
- README.md
- - default.vue
- - async.vue
  - index.vue
  - instant.vue
- app.config.ts
- nuxt.config.ts
- tsconfig.json
- types.d.ts
- module.ts
- - useAsyncMeiliSearch.test.ts
  - useInstantSearch.test.ts
  - useMeiliSearch.test.ts
  - useMeiliSearchRef.test.ts
- - meilisearch-mock.ts
- - meilisearch.test.ts
- module.test.ts
- setup.ts
.editorconfig
.gitignore
.npmrc
build.config.ts
CHANGELOG.md
eslint.config.mjs
LICENSE
package.json
pnpm-lock.yaml
README.md
renovate.json
skills-lock.json
tsconfig.json
vitest.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/xlanex6/nuxt-meilisearch

Downloads the entire project code from GitHub to your computer.

cd nuxt-meilisearch

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install nuxt-meilisearch

Downloads and installs the libraries listed in package.json.

yarn add nuxt-meilisearch

Type this command into your terminal and run it.

pnpm add nuxt-meilisearch

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![xlanex6/nuxt-meilisearch](https://raw.githubusercontent.com/xlanex6/nuxt-meilisearch/master/docus/public/cover.png)](https://nuxt-meilisearch.vercel.app/)

<p align='center'>

[![Latest Stable Version](https://img.shields.io/npm/v/nuxt-meilisearch.svg?style=for-the-badge)](https://www.npmjs.com/package/nuxt-meilisearch) [![License](https://img.shields.io/npm/l/nuxt-meilisearch.svg?style=for-the-badge)](https://www.npmjs.com/package/nuxt-meilisearch)
[![Twitter Follow](https://img.shields.io/twitter/follow/xlanex6?color=1DA1F2&logo=twitter&style=for-the-badge)](https://twitter.com/xlanex6)

</p>

# Nuxt Meilisearch

Integrate [Meilisearch](https://meilisearch.com/?utm_campaign=oss&utm_source=github&utm_content=nuxt-meilisearch) fast and hyper-relevant search engine in your [Nuxt](https://nuxt.com) application.

Read [Nuxt Meilisearch documentation](https://nuxt-meilisearch.vercel.app).

## Features

- Nuxt 3 integration
- Auto-imported composables
- Server-side rendering support
- Client & server integration of Meilisearch
- Full TypeScript support
- Compatible with [Instant Meilisearch](https://github.com/meilisearch/instant-meilisearch)
- Vue [Algolia InstantSearch](https://github.com/algolia/instantsearch) components (optional)

## Installation

Add `nuxt-meilisearch` using the Nuxt CLI to your project

```bash
npx nuxi@latest module add nuxt-meilisearch
```

or add `nuxt-meilisearch` using your dependency manager

```bash
# 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`:

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-meilisearch'
  ],
  meilisearch: {
    hostUrl:  '<your_meilisearch_host>', //required
    searchApiKey: '<public_search_api_key>', // required
    adminApiKey: '<admin_api_key>', // optional
    serverSideUsage: true // default: false
})
```

That's it! 🎉

## Usage

This example performs a search in the `books` index:

```html
<script setup>
const { search, result } = useMeiliSearch('books')

onMounted(async () => {
  await search('harry');
})
</script>

<template>
  <div>
    {{ result }}
  </div>
</template>
```

Learn more in the [Nuxt Meilisearch documentation](https://nuxt-meilisearch.vercel.app).

## Contributing

Issues and pull requests are welcome. 🫶

**Local development**

- Run `npm run dev:prepare` to generate type stubs.
- Use `npm run dev` to start [playground](./playground) in development mode.

## Licence

[MIT Licence](./LICENCE)

<!--
For Meilisearch DEmo
exemple valid MASTER_KEY
`PZKj1rFXYBnjLzEIxXRRaEz3gNDWTG3JoW6ZDzd6-mo`

```bash
docker run -it --rm \
  -p 7700:7700 \
  -e MEILI_MASTER_KEY='PZKj1rFXYBnjLzEIxXRRaEz3gNDWTG3JoW6ZDzd6-mo'\
  -v $(pwd)/meili_data:/meili_data \
  getmeili/meilisearch:v1.5
``` -->