Pagination

Usage

Utilise with v-model to make the current page reactive. Pass a number to the num-pages prop to indicate the total number of pages available.

<script lang="ts" setup>
const pageNum = ref(2)
</script>

<template>
  <CPagination
    v-model="pageNum"
    :num-pages="7"
  />
</template>

Hide numbers

This boolean prop will hide the page numbers if provided and solely display next/prev page toggles.

<template>
<CPagination hide-nums :model-value="1" />
</template>

Props