use client for serverDbtable

components/ServerDbTable.vue

@@ -7,6 +7,7 @@ import { useDisplay } from "vuetify";
 import { useThrottleFn } from '@vueuse/core'
 import type { FacetInputItem, FilterItem } from '@/components/AutocompleteMeiliFacets.vue'
 import { useMeiliSearch } from "#imports"
+import type { SearchResponse } from 'meilisearch'
 // import { saveAs } from "file-saver";
 export interface SortItem {
     key: string,
@@ -55,9 +56,11 @@ const props = withDefaults(defineProps<Props>(), {
     }
 });
 const slots = useSlots()
+const client = useMeiliSearchRef()
 const sortByRef = toRef(props.sortBy)
 const emit = defineEmits(["refresh:search"])
-const { search: msSearch, result: msResult } = useMeiliSearch(props.autocompleteMeiliFacetsProps.db)
+const msResult = ref()
+// const { search: msSearch, result: msResult } = useMeiliSearch(props.autocompleteMeiliFacetsProps.db)
 const search: Ref<string> = ref("");
 const filterOrSearch: Ref<FilterItem[] | null> = ref(null)
 const hitsPerPage: Ref<number> = ref(25)
@@ -118,7 +121,7 @@ watch([paginationParams, msSortBy, page], ([newParams, newSort, newPage]) => {
     }
 })
 
-onBeforeMount(async () => {
+onMounted(async () => {
     searchOrFilter()
     emitRefreshRes()
 })
@@ -214,7 +217,15 @@ async function searchOrFilter() {
         try {
             loading.value = true
             const q = search.value
-            await msSearch(q, { ...paginationParams.value, filter: toValue(computedFilter), sort: msSortBy.value })
+            const response = await client
+                .index(props.autocompleteMeiliFacetsProps.db)
+                .search(q, {
+                    ...paginationParams.value,
+                    filter: toValue(computedFilter),
+                    sort: msSortBy.value
+                })
+            // await msSearch(q, { ...paginationParams.value, filter: toValue(computedFilter), sort: msSortBy.value })
+            msResult.value = response
         } catch (error: any) {
             filterError.value = error
             console.log(error)

docker-compose.yml

@@ -7,7 +7,7 @@ services:
       args:
         BASE_URL: /wiki
         MEILI_HOST: http://localhost:7700
-        MEILI_API_KEY: f5f5f1bc48e6379fc2509f5bf0aed1fce96c1bbf86e0a194c605b258d7cfe890
+        MEILI_API_KEY: 3534db2924c3938bab5fc878906aaf1b83f8f39867891c6d020b05043b04b1ef
         HOST_URL: http://localhost:8082
     container_name: nuxt
     environment: