Overview
I created a sample repository using @elastic/search-ui with Nuxt.
https://github.com/nakamura196/nuxt-search-ui-demo
You can try it from the following URL.
https://nakamura196.github.io/nuxt-search-ui-demo
Background
@elastic/search-ui is described as follows.
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.
A sample repository using Vue.js is published at the following link.
https://github.com/elastic/vue-search-ui-demo
This time, I created a sample repository using Nuxt, based on the above repository.
Notes
Initial Search
By specifying the following, I was able to execute a search on initial load.
https://github.com/nakamura196/nuxt-search-ui-demo/blob/main/searchConfig.ts#L49
This is documented in the following official documentation.
https://www.elastic.co/docs/current/search-ui/api/react/search-provider
Reference: Creating a Custom Connector
By creating a custom connector with reference to the following, it was possible to use APIs other than Elasticsearch.
https://www.elastic.co/docs/current/search-ui/guides/building-a-custom-connector
Specifically, by following the steps below, it was also possible to use it in combination with the JSON:API Search API created in Drupal.
https://next-drupal.org/guides/search-api
Summary
I hope this serves as a useful reference for creating applications with search functionality.