@nuxtjs/algolia
機能
- Algolia との簡単な統合
- useAlgoliaSearch, useAsyncAlgoliaSearch などの便利なコンポーザブル
- Vue Instantsearch コンポーネントのサポート
- Algolia Recommend のサポート
- Docsearch のサポート
- 自動インデックス作成のサポート
- リクエストとレスポンスのキャッシングのサポート
- SSR リクエストのサポート
プレビュー
セットアップ
npx nuxi@latest module add algolia
基本的な使い方
ALGOLIA_API_KEY および ALGOLIA_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>
開発
- このリポジトリをクローンします
yarn installまたはnpm installを使用して依存関係をインストールしますyarn devまたはnpm run devを使用して開発サーバーを起動します