概要

Nuxtで@elastic/search-uiを使ったサンプルリポジトリを作成しました。

GitHub - nakamura196/nuxt-search-ui-demo: A demo of implementing Elastic's Search UI and App Search using Nuxt
A demo of implementing Elastic's Search UI and App Search using Nuxt - nakamura196/nuxt-search-ui-demo
GitHub

以下からお試しいただけます。

nakamura196.github.io
nakamura196.github.io

背景

@elastic/search-uiは以下のように説明されています。

What is Search UI? | Elastic Docs
Search UI is a JavaScript library from Elastic. It helps you create modern and customizable search experiences. You can use it with Elasticsearch or other...
www.elastic.co

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を使ったサンプルリポジトリが公開されています。

GitHub - elastic/vue-search-ui-demo: A demo of implementing Elastic's Search UI and App Search using Vue.js
A demo of implementing Elastic's Search UI and App Search using Vue.js - elastic/vue-search-ui-demo
GitHub

今回は上記のリポジトリを参考に、Nuxtを使ったサンプルリポジトリを作成しました。

メモ

初期検索

以下のように指定することで、初期読み込み時の検索を実行することができました。

nuxt-search-ui-demo/searchConfig.ts at main · nakamura196/nuxt-search-ui-demo
A demo of implementing Elastic's Search UI and App Search using Nuxt - nakamura196/nuxt-search-ui-demo
GitHub
 
  alwaysSearchOnInitialLoad: true,

公式ドキュメントの以下に記載がありました。

SearchProvider | Search UI
The SearchProvider is a React wrapper around the Headless Core, and makes state and actions available to Search UI and in a React Context, and also via...
www.elastic.co

参考： カスタムconnectorの作成

以下を参考にカスタムconnectorを作成することで、Elasticsearch以外のAPIでも使用することができました。

Building a custom connector | Search UI
This guide helps you build a custom connector so you can use Search UI with your own API. A connector is a class that implements the following methods:...
www.elastic.co

具体的には以下のような手順を参考に、Drupalで作成したJSON:API Search APIと組み合わせて使用することも可能でした。

next-drupal.org
next-drupal.org

まとめ

検索機能を持つアプリケーションの作成にあたり、参考になりましたら幸いです。

動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。