Nuxt Meilisearch

將 Meilisearch 這個快速且高度相關的搜尋引擎整合到您的 Nuxt 應用程式中。

功能特色

Nuxt 3 整合
自動匯入的 composables
伺服器端渲染支援
Meilisearch 的客戶端與伺服器整合
完整的 TypeScript 支援
與 Instant Meilisearch 相容
Vue Algolia InstantSearch 元件（可選）

安裝

安裝 nuxt-meilisearch

# with npm
npm install nuxt-meilisearch

# with yarn
yarn add nuxt-meilisearch

# with pnpm
pnpm add nuxt-meilisearch

!警告 v1.0 在模組設定選項上引入了重大變更。

然後，更新您的 nuxt.config.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
})

使用方法

此範例會在 books 索引中執行搜尋

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

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

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