Nuxt Meilisearch
Meilisearchの高速で高度に関連性の高い検索エンジンをNuxtアプリケーションに統合します。
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
!警告 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 ドキュメントで詳細をご覧ください。
貢献
Issueとプルリクエストをお待ちしております。🫶
ローカル開発
npm run dev:prepareを実行して、型スタブを生成します。npm run devを使用して、開発モードでplaygroundを起動します。