概要
Nuxtで@elastic/search-uiを使ったサンプルリポジトリを作成しました。
https://github.com/nakamura196/nuxt-search-ui-demo
以下からお試しいただけます。
https://nakamura196.github.io/nuxt-search-ui-demo
背景
@elastic/search-uiは以下のように説明されています。
https://www.elastic.co/docs/current/search-ui/overview
A JavaScript library for the fast development of modern, engaging search experiences with Elastic. Get up and running quickly without re-inventing the wheel.
（機械翻訳）Elasticを使用して、モダンで魅力的な検索エクスペリエンスを迅速に開発するためのJavaScriptライブラリです。車輪を再発明することなく、すぐに使い始めることができます。
以下でVue.jsを使ったサンプルリポジトリが公開されています。
https://github.com/elastic/vue-search-ui-demo
今回は上記のリポジトリを参考に、Nuxtを使ったサンプルリポジトリを作成しました。
メモ
初期検索
以下のように指定することで、初期読み込み時の検索を実行することができました。
https://github.com/nakamura196/nuxt-search-ui-demo/blob/main/searchConfig.ts#L49
公式ドキュメントの以下に記載がありました。
https://www.elastic.co/docs/current/search-ui/api/react/search-provider
参考： カスタムconnectorの作成
以下を参考にカスタムconnectorを作成することで、Elasticsearch以外のAPIでも使用することができました。
https://www.elastic.co/docs/current/search-ui/guides/building-a-custom-connector
具体的には以下のような手順を参考に、Drupalで作成したJSON:API Search APIと組み合わせて使用することも可能でした。
https://next-drupal.org/guides/search-api
まとめ
検索機能を持つアプリケーションの作成にあたり、参考になりましたら幸いです。