createPagination

A lightweight composable for managing pagination state with navigation methods and computed visible page items.

Copy Markdown

Preview Intermediate Apr 5, 2026

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