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

Selecting Images Per Page

Explore how to dynamically control the number of images displayed per page in a Nuxt 3 project. This lesson guides you through creating a reusable component that manages image count using global state and query strings, integrating it seamlessly with the app and including proper credit for Pixabay images.

We'll cover the following...

Our project is already at a stage where the number of images per page is controlled by a dynamic value. This dynamic value is available globally inside our useState.js file:

Javascript (babel-node)
// useState.js
export const useImagesPerPage = () => useState("images-per-page", () => 20);

Then, we add this to the query string inside useSearch.js:

Javascript (babel-node)
// ...
const imagesPerPage = useImagesPerPage();
// ...
const { data: images } = useFetch(
  () =>
    `?key=${apiKey}&q=${searchTerm.value}&page=${currentPageNumber.value}&per_page=${imagesPerPage.value}&safesearch=${safeSearch.value}`,
  {
    baseURL: baseUrl,
  }
);

When adding the query string as a function, the results will be updated once any of the values change. ...