Add support for an advanced searchbar

[Rednas83]

Something like
https://github.com/tauri-apps/meilisearch-docsearch
https://github.com/meilisearch/meilisearch-vue?tab=readme-ov-file#-getting-started-vue-3
https://algolia.nuxtjs.org/advanced/vue-instantsearch/

[Rednas83]

Just tried it myself. I hope it can help🤞
plugins/0.libraries.client.ts

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

pages/search.vue

<template>
  <vinput content="ClearSearchAddDelete" @input="operate"> </vinput>
  <div id="app" class="wrapper">
    <ais-instant-search :search-client="meili" index-name="movies" :future="{ preserveSharedStateOnUnmount: true }">
      <ais-search-box />
      <ais-hits>
        <template v-slot:item="{ item }">
          <ais-highlight :hit="item" attribute="name" />
        </template>
      </ais-hits>
    </ais-instant-search>
  </div>
  <pre> {{ meili }} </pre>
</template>

<script setup lang="ts">
import "instantsearch.css/themes/algolia-min.css"
const meili = useMeiliSearch("movies")
console.log("meili", meili)
// const { data } = await useFetch("/api/search/open/movies")
// console.log("/api/search/connect", data.value)
const operate = async function (event: any) {
  if (event == "Clear") {
    meili.result.value = null
  } else if (event == "Search") {
    await meili.search("Batman")
  }
}

onMounted(async () => {
  await operate("Search")
})
</script>

Nuxi info

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.12.2
- Nuxt Version:     3.12.4
- CLI Version:      3.12.0
- Nitro Version:    2.9.7
- Package Manager:  [email protected]
- Builder:          -
- User Config:      telemetry, modules, meilisearch, experimental, nitro, icon, build, routeRules, components, content, formkit, imports, css, devtools, compatibilityDate
- Runtime Modules:  @vueuse/[email protected], @nuxt/[email protected], normalizedModule(), @nuxt/[email protected], @formkit/[email protected], @nuxt/[email protected], @nuxt/[email protected], [email protected], [email protected]
- Build Modules:    -
------------------------------

But I get
Client

Server

Meili

Looks like ais-instant-search requires more then just the result and the read function which are returned from useMeiliSearch("movies"). Also for me it's strange that the server is giving warnings about a page but perhaps that is an issue with nuxt🤔

Any ideas what is missing or how to get it to work?

[xlanex6]

Hi @Rednas83

I was off for a couple of days

I will investigate and try to get back to you with feedback

[Rednas83]

Any updates?