Search⌘ K
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 string will be used to fetch the data, but we also need a way to capture the value the user ...