Open Rednas83 opened 3 weeks ago
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: pnpm@9.7.1
- Builder: -
- User Config: telemetry, modules, meilisearch, experimental, nitro, icon, build, routeRules, components, content, formkit, imports, css, devtools, compatibilityDate
- Runtime Modules: @vueuse/nuxt@11.0.1, @nuxt/devtools@1.3.9, normalizedModule(), @nuxt/content@2.13.2, @formkit/nuxt@1.6.5, @nuxt/image@1.7.0, @nuxt/ui@2.18.4, nuxt-remote-fn@0.5.3, nuxt-meilisearch@1.3.10
- 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?
Hi @Rednas83
I was off for a couple of days
I will investigate and try to get back to you with feedback
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/