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:

Press + to interact
// useState.js
export const useImagesPerPage = () => useState("images-per-page", () => 20);

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

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