Pagination
A headless component for creating page navigation with proper ARIA support.
Usage
The Pagination component provides a compound component pattern for building page navigation interfaces. It uses the createPagination and createOverflow composable internally.
The two core props are size (total item count) and items-per-page (items per page, default 10). Together they determine the page count:
<template>
<!-- 200 items at 10 per page = 20 pages -->
<Pagination.Root :size="200" :items-per-page="10" v-model="page" />
<!-- 200 items at 25 per page = 8 pages -->
<Pagination.Root :size="200" :items-per-page="25" v-model="page" />
</template>Anatomy
<script setup lang="ts">
import { Pagination } from '@vuetify/v0'
</script>
<template>
<Pagination.Root>
<Pagination.Status />
<Pagination.First />
<Pagination.Prev />
<Pagination.Ellipsis />
<Pagination.Item />
<Pagination.Next />
<Pagination.Last />
</Pagination.Root>
</template>For responsive sizing to work accurately, all pagination buttons must have the same width. The component measures a sample button and uses that width to calculate how many buttons fit. If buttons have variable widths (e.g., single-digit “1” vs double-digit “50”), the calculation will be inaccurate and items may overflow or leave excess space.
Accessibility
The Pagination component renders semantic HTML and manages ARIA attributes automatically:
Wraps controls in a
<nav>element witharia-label="pagination"for landmark navigationCurrent page button is marked with
aria-current="page"so screen readers announce it as the active pageArrow keys navigate between page buttons; Enter and Space select the focused page
Page changes are announced to screen readers via
aria-liveregion updates
For custom implementations, use renderless mode and bind the attrs slot prop to preserve all ARIA attributes:
<template>
<Pagination.Root v-slot="{ attrs }" renderless>
<nav v-bind="attrs">
<!-- Custom pagination controls -->
</nav>
</Pagination.Root>
</template>Pagination.Root
Props
totalVisible
number | undefinedNumber of visible page buttons. If undefined, auto-calculates based on container width.
Events
update:model-value
[value: T | T[]]Slots
default
PaginationRootSlotPropsPagination.Ellipsis
Props
Slots
default
PaginationEllipsisSlotPropsPagination.First
Props
Slots
default
PaginationFirstSlotPropsPagination.Item
Props
Slots
default
PaginationItemSlotPropsPagination.Last
Props
Slots
default
PaginationLastSlotPropsPagination.Next
Props
Slots
default
PaginationNextSlotPropsPagination.Prev
Props
Slots
default
PaginationPrevSlotPropsPagination.Status
Props
Slots
default
PaginationStatusSlotProps