Composables
usePdfKitPageNavigation
Page navigation utilities.
Provides page navigation utilities.
Usage
const {
currentPage,
goToPage,
nextPage,
prevPage,
firstPage,
lastPage,
canGoNext,
canGoPrev,
} = usePdfKitPageNavigation({ totalPages: 100 })
Options
usePdfKitPageNavigation({
totalPages: 100, // required
initialPage: 1,
})
| Option | Type | Default | Description |
|---|---|---|---|
totalPages | number | required | Total number of pages |
initialPage | number | 1 | Initial page number |
totalPages is a required option. Calling the composable without it will not work — pass the document page count explicitly.
:::
Return Values
| Property | Type | Description |
|---|---|---|
currentPage | Ref<number> | Current page number |
goToPage | (page: number) => void | Navigate to page |
nextPage | () => void | Go to next page |
prevPage | () => void | Go to previous page |
firstPage | () => void | Go to first page |
lastPage | () => void | Go to last page |
canGoNext | ComputedRef<boolean> | Can go to next page |
canGoPrev | ComputedRef<boolean> | Can go to previous page |
Example
<template>
<div class="flex items-center gap-2">
<UButton :disabled="!canGoPrev" @click="prevPage">
Previous
</UButton>
<span>{{ currentPage }} / {{ totalPages }}</span>
<UButton :disabled="!canGoNext" @click="nextPage">
Next
</UButton>
<UInput
type="number"
:model-value="currentPage"
@change="goToPage(Number($event.target.value))"
/>
</div>
</template>
<script setup>
const totalPages = 100
const {
currentPage,
goToPage,
nextPage,
prevPage,
canGoNext,
canGoPrev,
} = usePdfKitPageNavigation({ totalPages })
const firstPage = () => goToPage(1)
const lastPage = () => goToPage(totalPages)
</script>