Nuxt Meilisearch
在您的 Nuxt 应用程序中集成快速且高度相关的搜索引擎 Meilisearch。
特性
- Nuxt 3 集成
- 自动导入的组合式函数
- 服务器端渲染支持
- 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
!WARNING 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>
在 Nuxt Meilisearch 文档中了解更多信息。
贡献
欢迎提交问题和拉取请求。 🫶
本地开发
- 运行
npm run dev:prepare
以生成类型存根。 - 使用
npm run dev
在开发模式下启动 playground。