Pagination tutorial

[mrleblanc101]

Hi,
I'm not quite sure how to make a pagination work.
I know I can use limit and skip, but queryContent does not return any metadata like the total number of post, so I can't calculate how many pagination links to display.

[albertcito]

I did it in this way:

<script setup lang="ts">
import page from '.index.yml';
import getIntegerOrDefault from 'ui/util/numbers/getIntegerOrDefault';

useHead({ title: page.title });

const collection = 'articles';
const path = '/articles';
const imagePath = '/img/posts';

const route = useRoute();
const pageNumber = computed(() => getIntegerOrDefault(route.query.page, 1));
const itemsPerPage = 3;
const totalSkip = computed(() => (pageNumber.value - 1) * itemsPerPage);
const { data } = await useAsyncData(
  computed(() => `${collection}_${pageNumber.value}_${itemsPerPage}`),
  () => queryCollection(collection)
    .order('date', 'DESC')
    .skip(totalSkip.value)
    .limit(itemsPerPage)
    .all(),
);
const { data: total } = await useAsyncData('total', () => queryCollection(collection)
  .count());
const totalPages = computed(() => Math.ceil((total.value ?? 0) / itemsPerPage.value));
</script>
<template>
  <UMain class="flex flex-col gap-8 py-8 items-center ">
    <UBlogPosts>
      <UBlogPost
        v-for="(post, index) in data"
        :key="index"
        v-bind="post"
        :to="post.path"
        :image="post.image ? `${imagePath}/${post.image.src}` : undefined"
      />
    </UBlogPosts>
    <UPagination
      v-if="total"
      v-model:page="pageNumber"
      :items-per-page="itemsPerPage"
      :total="total"
      :to="(pageSelected) => ({
        path,
        query: { page: pageSelected },
      })"
    />
  </UMain>
</template>

[albertcito]

But, I'm thinking replace getIntegerOrDefault by getIntegerOrNaN and if it's NaN I'll redirect to /articles page. In that case the user will not be able to see a page like this /articles?page=Idontcare