Nuxt•11mo ago

Special Chars in Query params in useFetch()

Hi everyone!

My Backend expects query params for filter use case to be like: http://localhost:3000/cats?search=i&filter.age=$gte:3

The Filter name includes a special char (.) -> e.g. &filter.age=

How do I provide the parameters that they are not ignored?

kapa.ai•1/22/25, 3:01 PM

Hi @amueller82. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•1/22/25, 3:02 PM

----------------------
To handle special characters in query parameters when using in Nuxt, you can use the

query

query

option and leverage JavaScript's object notation. Here's how you can approach this:

In this example, we're using an object to define the query parameters. The key is enclosed in quotes to preserve the dot notation. Nuxt will automatically encode these parameters correctly when constructing the URL.

This approach is based on the information provided in the Nuxt documentation on useFetch, which states that the

query

query

option "Adds query search params to URL using ufo".

It's worth noting that Nuxt uses the library to handle URL operations, which should properly encode special characters in query parameters.

If you need to construct more complex URLs or have dynamic parameters, you can also use a computed URL as described in the Nuxt documentation on Computed URL.

Remember that when using special characters or symbols in your URLs, it's crucial to ensure they are properly encoded to avoid any issues with request parsing on the server side.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/22/25, 3:02 PM

@991707183123288175 Kapa.ai is still learning and improving, please let me know how I did by reacting below.