usePagination
A lightweight composable for managing pagination state with navigation methods and computed visible page items.
Usage
The usePagination composable provides reactive pagination state management with navigation methods and automatic computation of visible page items with ellipsis support.
ts
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 }
// ]Architecture
usePagination computes page state and navigation:
The following API details are for the usePagination composable.
Functions
createPaginationContext
(_options?: PaginationContextOptions) => ContextTrinity<PaginationContext>Creates a pagination context for dependency injection.
usePagination
(namespace?: string) => PaginationContextReturns the current pagination instance from context.
Options
Properties
Methods
Was this page helpful?