A Beginner’s Guide To Nuxt 3/

...

/

Selecting Images Per Page

Selecting Images Per Page

Learn how to update the number of images we see on each page.

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