通过 100 多个技巧学习 Nuxt!

algolia
@nuxtjs/algolia

Nuxt 的 Algolia 搜索模块

@nuxtjs/algolia

@nuxtjs/algolia

npm versionnpm downloadsGithub Actions CICodecovLicense

Algolia 模块,适用于 Nuxt

功能

  • 轻松集成 Algolia
  • 方便的组合式函数,如 useAlgoliaSearch、useAsyncAlgoliaSearch
  • 支持 Vue Instantsearch 组件
  • 支持 Algolia Recommend
  • 支持 Docsearch
  • 支持自动索引
  • 支持缓存请求和响应
  • 支持 SSR 请求

📖  阅读文档

预览

Open in StackBlitz

设置

npx nuxi@latest module add algolia

基本用法

ALGOLIA_API_KEYALGOLIA_APPLICATION_ID 环境变量添加到 .env 文件。

ALGOLIA_API_KEY="0fd1c4eba2d831788333e77c9d855f1d"
ALGOLIA_APPLICATION_ID="AGN9HEEKF3"

现在你可以在你的应用程序中使用 @nuxtjs/algolia 了!

客户端

<script setup lang="ts">
const { result, search } = useAlgoliaSearch('test_index')

onMounted(async () => {
  await search({ query: 'Samsung' })
})
</script>

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

或者 SSR

<script setup lang="ts">
const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
</script>

<template>
  <div>{{ data }}</div>
</template>

开发

  1. 克隆此存储库
  2. 使用 yarn installnpm install 安装依赖项
  3. 使用 yarn devnpm run dev 启动开发服务器

许可证

MIT 许可证