Vue 3/Nuxt 3 - useFetch handling array params

Question

I'm currently updating my finished working project to Nuxt 3 from Nuxt 2 and one issue is blocking me. Maybe it's my fault but after hours of googleing couldn't find out how to solve this or what am I doing wrong.

My problem is, that I'm passing an array to the useFetch function as a parameter but if I catch it at the backend (Laravel 10) it's only showing a single value.

The URL I have now for example: /api/my/url?page=1&order=latest&brand=2&brand=3

But previously with axios I had the following url: /api/my/url?page=1&order=latest&brand[]=2&brand[]=3

Tha code looks like this maybe it helps but it's really simple, nothing special really happens:

const { data, pending, error } = await useFetch(`/api/my/url/${route.params.slug}`, {
    params: { page, order, brand, condition, min, max },
    watch: [page, order, brand, condition, min, max],
    onResponse({ request, response, options }) {
        if (response.ok) {
            ...
       }
    },
});

Once again I'm expecting to have the parameters at the backend side to be an array as well instead of a single value.

Answer 1

This may be due to the fact that in useFetch() objects passed to params are automatically stringified according to documentation:

Using the query option, you can add search parameters to your query. This option is extended from unjs/ofetch and is using unjs/ufo to create the URL. Objects are automatically stringified.

You can try using $fetch instead of useFetch in your case