Problems NuxtLink object and not url

playground/components/SearchExperience.vue

@@ -1,5 +1,16 @@
 <template>
   <div>
+    <NuxtLink :to="{
+      name: 'brand',
+      query: {
+        'refinementList[brand][0]': 'Samsung',
+      },
+      params: {
+        brand: 'Samsung',
+      },
+    }">TEST QUERY OBJECT</NuxtLink>
+
+    <NuxtLink to="/Samsung?refinementList%5Bbrand%5D%5B0%5D=Samsung">TEST QUERY URL</NuxtLink>
     <AisInstantSearch
       :widgets
       :configuration

playground/pages/index.vue

@@ -3,10 +3,22 @@
     <NuxtLink
       to="/?instant_search%5Btoggle%5D%5Bfree_shipping%5D=true&instant_search%5Bquery%5D=testa"
     >
-      Test query
+      Test query URL
     </NuxtLink>
+    <br />
     <NuxtLink to="/Samsung"> Go to brand </NuxtLink>
+    <br />
     <NuxtLink to="/test/Samsung"> Go to brand catchall </NuxtLink>
+    <br />
+    <NuxtLink :to="{
+      name: 'index',
+      query: {
+        'instant_search[toggle][free_shipping]': 'true',
+        'instant_search[query]': 'testa',
+        'instant_search[refinementList][brand][0]': 'Apple',
+        'instant_search[refinementList][brand][1]': 'Pelican'
+      }
+    }"> Test query OBJECT</NuxtLink>
 
     <AisInstantSearch :widgets :configuration :middlewares instance-key="index">
       <AisStats />

playground/pages/test/[...catchall].vue

@@ -29,8 +29,8 @@
             v-for="item in items"
             :id="item.objectID"
             :key="item.objectID"
-            :name="item.name"
-            :price="item.price"
+            :name="item.name as string"
+            :price="item.price as string"
           />
         </template>
       </AisInfiniteHits>

src/runtime/composables/useAisRouter.ts

@@ -2,19 +2,64 @@ import { useRouter, useNuxtApp } from "nuxt/app";
 import { ref } from "vue";
 import type { Ref } from "vue";
 import type { RouterProps } from "instantsearch.js/es/middlewares";
+import { parseURL, parseQuery, type ParsedQuery } from "ufo"
+import type { LocationQuery } from "#vue-router";
 
-function stripUndefined(obj: Record<string, any>) {
+type QueryObject = {
+  [x:string]: QueryObject | string | string[] | number | boolean
+}
+
+const stripUndefined = (obj: Record<string, any>) => {
   return Object.fromEntries(
-    Object.entries(obj).filter(([k, v]) => v !== undefined),
-  );
+    Object.entries(obj).filter(([k, v]) => v !== undefined)
+  )
 }
+
+const convertToNestedObject = (query: ParsedQuery): QueryObject => {
+  const result: QueryObject = {}
+
+  Object.keys(query).forEach(key => {
+      const value = query[key]
+      const keys = key.split(/[[\]]+/).filter(k => k)
+
+      let currentLevel: QueryObject = result
+
+      keys.forEach((k, index) => {
+          if (index === keys.length - 1) {
+              currentLevel[k] = value
+          } else {
+              if (!currentLevel[k]) {
+                // @ts-ignore
+                  currentLevel[k] = isNaN(keys[index + 1]) ? {} : []
+              }
+              // @ts-ignore
+              currentLevel = currentLevel[k]
+          }
+      });
+  });
+
+  return result
+}
+
+const containsBrackets = (obj: LocationQuery) => {
+  return Object.keys(obj).some(key => key.includes('[') || key.includes(']'))
+}
+
 export const useAisRouter = () => {
   const router = useRouter();
   const app = useNuxtApp();
   const algoliaRouter: Ref<Pick<Required<RouterProps>, "router">> = ref({
     router: {
       read() {
-        const query = router.currentRoute.value.query;
+        const currentRoute = router.currentRoute.value
+        let query
+        if(containsBrackets(currentRoute.query)){
+          const urlParsed = parseURL(currentRoute.fullPath)
+          const queryParsed = parseQuery(urlParsed.search)
+          query = convertToNestedObject(queryParsed)
+        } else {
+          query = currentRoute.query
+        }
         const normalizedQuery = Array.isArray(query) ? query[0] : query;
         return stripUndefined(normalizedQuery);
       },