Search⌘ K
Home
Courses
A Beginner’s Guide To Nuxt 3

Query Parameters

Explore how to pass query parameters in Nuxt 3 URLs and access them in server API routes using getQuery. Learn to filter data dynamically by converting strings to proper types with JSON.parse, enabling flexible data handling and improved API responses.

We'll cover the following...

We can also pass query parameters along with the request. This was how we passed information with the Pixabay API: https://pixabay.com/api/?key=${apiKey}&q=${searchTerm.value}&page=${currentPageNumber.value}

This string passed the API key, the search term, and the requested page number.

Passing query parameters

We pass query parameters into the URL string when requesting the data:

Javascript (babel-node)
const data = await $fetch('/api/posts?active=true&featured=true')

This is the same URL used previously but with a ? on the end. After we add any key-value pairs separated by the ampersand. These extra pieces of query data will now be available inside the posts.js route. ...