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

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:

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 ...