A Beginner’s Guide To Nuxt 3/

...

/

User Input and Query String Updates

User Input and Query String Updates

Learn how to perform searches from the user’s input.

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:

Press + to interact
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 ...