createPagination
A lightweight composable for managing pagination state with navigation methods and computed visible page items.
Usage
The createPagination composable provides reactive pagination state management with navigation methods and automatic computation of visible page items with ellipsis support.
import { ref } from 'vue'
import { createPagination } from '@vuetify/v0'
const pagination = createPagination({
size: 200, // Total items
itemsPerPage: 10,
visible: 5,
})
console.log(pagination.pages) // 20 (200 items / 10 per page)
console.log(pagination.items.value)
// [
// { type: 'page', value: 1 },
// { type: 'page', value: 2 },
// { type: 'page', value: 3 },
// { type: 'ellipsis', value: '…' },
// { type: 'page', value: 20 }
// ]Context / DI
Use createPaginationContext to share a pagination instance across a component tree:
import { createPaginationContext } from '@vuetify/v0'
export const [usePagination, providePagination, pagination] =
createPaginationContext({ size: 100, itemsPerPage: 10 })
// In parent component
providePagination()
// In child component
const pagination = usePagination()
pagination.next()Architecture
createPagination computes page state and navigation:
Reactivity
| Property/Method | Reactive | Notes |
|---|---|---|
page | WritableComputedRef, auto-clamps when total pages shrinks | |
pages | Total page count, computed from size / itemsPerPage | |
items | Computed array of PaginationTicket — each is { type: 'page', value: number } or { type: 'ellipsis', value: string } | |
pageStart | Computed, start index for current page | |
pageStop | Computed, end index for current page | |
isFirst | Computed, true when on first page | |
isLast | Computed, true when on last page | |
itemsPerPage | Getter — current items per page (reflects option) | |
size | Getter — total item count (reflects option) | |
ellipsis | Getter — the ellipsis string or false when disabled | |
select(page) | - | Navigate to a specific page number |
next() | - | Go to next page (no-op if already last) |
prev() | - | Go to previous page (no-op if already first) |
first() | - | Jump to page 1 |
last() | - | Jump to final page |
v-model support Pass a ref as the page option to enable two-way binding with your component’s page state.
Examples
Showing 1–6 of 47 · Page 1 of 8
FAQ
createPagination owns only page-navigation math — you slice the array yourself with pageStart and pageStop. Use it for a plain in-memory list; for filtering, sorting, and server-side data, use createDataTable.
Pass a ref as the page option. page is a WritableComputedRef, so writes to it and your component’s state stay in sync.
items returns PaginationTicket[], where each is { type: 'page', value: number } or { type: 'ellipsis', value: '…' }. Branch on item.type to render numbered buttons versus the gap marker.
It sets how many numbered page buttons items exposes before ellipsis entries collapse the rest — visible: 5 over 20 pages yields a short window plus the boundary pages rather than all twenty.
Yes — pass a ref or getter as itemsPerPage. The example passes a shallowRef, so changing it recomputes pages, items, pageStart, and pageStop automatically.