Overview

I created a sample repository using @elastic/search-ui with Nuxt.

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

You can try it from the following URL.

nakamura196.github.io
nakamura196.github.io

Background

@elastic/search-ui is described as follows.

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.

A sample repository using Vue.js is published at the following link.

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

This time, I created a sample repository using Nuxt, based on the above repository.

Notes

By specifying the following, I was able to execute a search on initial load.

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,

This is documented in the following official documentation.

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

Reference: Creating a Custom Connector

By creating a custom connector with reference to the following, it was possible to use APIs other than Elasticsearch.

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

Specifically, by following the steps below, it was also possible to use it in combination with the JSON:API Search API created in Drupal.

next-drupal.org
next-drupal.org

Summary

I hope this serves as a useful reference for creating applications with search functionality.