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

User Input and Query String Updates

Explore how to capture and bind user input to update query strings dynamically in Nuxt 3 applications. Learn to optimize data fetching by controlling when requests are sent, enhancing performance and user experience in your projects.

We'll cover the following...

To perform a user-based search, we need to add a form input to our project. We also need to change the URL we pass to useFetch to be dynamic.

Dynamic query string

Here, we have a search term constant, which is passed to the URL:

Javascript (babel-node)
const config = useRuntimeConfig()
const apiKey = config.public.pixabayApiKey;
const baseUrl = "https://pixabay.com/api/";
const searchTerm = ref("");
const { data: images } = await useFetch(
  `?key=${apiKey}&q=${searchTerm.value}`,
	{
		baseURL: baseUrl,
	}
);

  • Line 5: We store a search term in a ref. This will be passed to our URL when requesting the data.

  • Line 8: We add the search term to the query string by passing in the searchTerm value. This will be updated after each search.

This dynamic query ...