Add Algolia Search To Nuxt V3

npm install vue-instantsearch algoliasearch instantsearch.css

import InstantSearch from 'vue-instantsearch/vue3/es';export default defineNuxtPlugin(nuxtApp => {  nuxtApp.vueApp.use(InstantSearch)})

import { AisInstantSearch, AisConfigure, AisSearchBox, AisRefinementList, AisHighlight, AisHits, AisPagination } from 'vue-instantsearch/vue3/es';

<script setup>/*import InstantSearch from 'vue-instantsearch/vue3/es';const nuxtApp = useNuxtApp()nuxtApp.vueApp.use(InstantSearch) */// not necessary if you use the plugins methodimport { AisInstantSearch, AisConfigure, AisSearchBox, AisRefinementList, AisHighlight, AisHits, AisPagination } from 'vue-instantsearch/vue3/es';useHead({  title: 'Search'})const {  query: { q },} = useRoute();import algoliasearch from 'algoliasearch/lite';// import 'instantsearch.css/themes/algolia-min.css';import 'instantsearch.css/themes/satellite-min.css';// import your algolias settingsimport { APPLICATION_ID, SEARCH_API_KEY, INDEX_NAME } from '~/secret/algolia';const searchClient = algoliasearch(  APPLICATION_ID,  SEARCH_API_KEY)// perform search based on /search?q=android query stringconst initialUiState = {  [INDEX_NAME]: {      query: q,      page: 1  }}</script><template>  <div>    <client-only placeholder="Loading...">      <ais-instant-search        :search-client="searchClient"        :index-name="INDEX_NAME"        :stalled-search-delay="1000"        :initial-ui-state="initialUiState"      >        <div class="grid grid-cols-6 gap-4">          <div class="hidden md:block">            <div class="text-xl mb-2">Tags</div>            <ais-refinement-list attribute="tags" />            <ais-configure :hitsPerPage="10" />          </div>          <div class="col-span-6 sm:col-span-5">            <ais-search-box placeholder="Search ..." class="searchbox" />            <ais-hits class="my-3">              <template v-slot:item="{ item }">                <NuxtLink :to="item.path" class="text-xl block"><ais-highlight :hit="item" attribute="title" /></NuxtLink>                <div><ais-highlight :hit="item" attribute="description" class="text-grey" /></div>                <div>                  <ul class="inline-sep-list">                    <li>{{ new Date(item.lastmod) }}</li>                    <li v-for="tag in item.tags">{{ tag }} </li>                  </ul>                </div>              </template>            </ais-hits>            <div class="pagination"><ais-pagination /></div>          </div>        </div>      </ais-instant-search>    </client-only>  </div></template><style>.ais-Hits-item {  box-shadow: none;  display: block;  font-size: 1.2rem;  padding: 0.5rem 0;}  </style>