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>Pagination Controls
First, prev, next, and last buttons with ellipsis support across 200 items.
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>