@nuxtjs/algolia
機能
- Algoliaとの簡単な連携
- useAlgoliaSearch、useAsyncAlgoliaSearchのような便利なコンポーザブル
- Vue InstantSearchコンポーネントのサポート
- Algolia Recommendのサポート
- Docsearchのサポート
- 自動インデックス作成のサポート
- リクエストとレスポンスのキャッシュのサポート
- SSRリクエストのサポート
プレビュー
セットアップ
npx nuxi@latest module add algolia
基本的な使い方
.envファイルにALGOLIA_API_KEYとALGOLIA_APPLICATION_ID環境変数を追加してください。
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>
開発
- このリポジトリをクローンする
yarn installまたはnpm installを使用して依存関係をインストール- 開発環境を準備するには
yarn dev:prepareまたはnpm run dev:prepareを使用してください yarn devまたはnpm run devを使用して開発サーバーを起動