Overview
Pagination provides navigation controls for paginated data with automatic calculation of visible page buttons based on container width. It supports first/prev/next/last navigation and automatically disables buttons when appropriate.
Sub-Components
- Pagination.Root: Container that manages pagination state
- Pagination.Item: Individual page button
- Pagination.First: Jump to first page
- Pagination.Prev: Go to previous page
- Pagination.Next: Go to next page
- Pagination.Last: Jump to last page
- Pagination.Ellipsis: Visual indicator for omitted pages
- Pagination.Status: Screen reader announcements for page changes
Usage
<script lang="ts" setup>
import { ref } from 'vue'
import { Pagination } from '@vuetify/v0'
const page = ref(1)
</script>
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.First />
<Pagination.Prev />
<template v-for="item in items" :key="item.value">
<Pagination.Item v-if="item.type === 'page'" :value="item.value" />
<Pagination.Ellipsis v-else />
</template>
<Pagination.Next />
<Pagination.Last />
</Pagination.Root>
</template>
Props
as
DOMElement | null
default:"'nav'"
The HTML element to render as
namespace
string
default:"'v0:pagination'"
Namespace for dependency injection
Number of visible page buttons. If undefined, auto-calculates based on container width
ellipsis
string | false
default:"'...'"
Ellipsis character
Model
Slot Props
Visible page items for rendering
Start index of items on current page (0-indexed)
End index of items on current page (exclusive)
Props
as
DOMElement | null
default:"'button'"
The HTML element to render as
Page number this item represents
Slot Props
Whether this page is currently selected
Attributes including aria-label and aria-current
Props
as
DOMElement | null
default:"'button'"
The HTML element to render as
Slot Props
Whether this button is disabled (on first page)
Attributes including data-disabled, aria-label, and type
Props
as
DOMElement | null
default:"'button'"
The HTML element to render as
Slot Props
Whether this button is disabled (on first page)
Attributes including data-disabled, aria-label, and type
Props
as
DOMElement | null
default:"'button'"
The HTML element to render as
Slot Props
Whether this button is disabled (on last page)
Attributes including data-disabled, aria-label, and type
Props
as
DOMElement | null
default:"'button'"
The HTML element to render as
Slot Props
Whether this button is disabled (on last page)
Attributes including data-disabled, aria-label, and type
Props
as
DOMElement | null
default:"'span'"
The HTML element to render as
Override ellipsis character from Root
Slot Props
The ellipsis character to display
Props
as
DOMElement | null
default:"'div'"
The HTML element to render as
Slot Props
Screen reader announcement message
Examples
Basic
With All Controls
With Slot Props
With Data Attributes
With Status
<script setup>
import { ref } from 'vue'
import { Pagination } from '@vuetify/v0'
const page = ref(1)
</script>
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.Prev>Prev</Pagination.Prev>
<template v-for="item in items" :key="item.value">
<Pagination.Item v-if="item.type === 'page'" :value="item.value">
{{ item.value }}
</Pagination.Item>
<Pagination.Ellipsis v-else />
</template>
<Pagination.Next>Next</Pagination.Next>
</Pagination.Root>
</template>
<script setup>
import { ref } from 'vue'
import { Pagination } from '@vuetify/v0'
const page = ref(1)
</script>
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.First>First</Pagination.First>
<Pagination.Prev>Prev</Pagination.Prev>
<template v-for="item in items" :key="item.value">
<Pagination.Item v-if="item.type === 'page'" :value="item.value">
{{ item.value }}
</Pagination.Item>
<Pagination.Ellipsis v-else />
</template>
<Pagination.Next>Next</Pagination.Next>
<Pagination.Last>Last</Pagination.Last>
</Pagination.Root>
</template>
<script setup>
import { ref } from 'vue'
import { Pagination } from '@vuetify/v0'
const page = ref(1)
</script>
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.First v-slot="{ isDisabled }">
<span :class="{ 'opacity-50': isDisabled }">«</span>
</Pagination.First>
<Pagination.Prev v-slot="{ isDisabled }">
<span :class="{ 'opacity-50': isDisabled }">‹</span>
</Pagination.Prev>
<template v-for="item in items" :key="item.value">
<Pagination.Item
v-if="item.type === 'page'"
:value="item.value"
v-slot="{ isSelected }"
>
<span :class="{ 'font-bold': isSelected }">{{ item.value }}</span>
</Pagination.Item>
<Pagination.Ellipsis v-else />
</template>
<Pagination.Next v-slot="{ isDisabled }">
<span :class="{ 'opacity-50': isDisabled }">›</span>
</Pagination.Next>
<Pagination.Last v-slot="{ isDisabled }">
<span :class="{ 'opacity-50': isDisabled }">»</span>
</Pagination.Last>
</Pagination.Root>
</template>
<script setup>
import { ref } from 'vue'
import { Pagination } from '@vuetify/v0'
const page = ref(1)
</script>
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.First class="data-[disabled]:opacity-50">
First
</Pagination.First>
<Pagination.Prev class="data-[disabled]:opacity-50">
Prev
</Pagination.Prev>
<template v-for="item in items" :key="item.value">
<Pagination.Item
v-if="item.type === 'page'"
:value="item.value"
class="data-[selected]:font-bold"
>
{{ item.value }}
</Pagination.Item>
<Pagination.Ellipsis v-else />
</template>
<Pagination.Next class="data-[disabled]:opacity-50">
Next
</Pagination.Next>
<Pagination.Last class="data-[disabled]:opacity-50">
Last
</Pagination.Last>
</Pagination.Root>
</template>
<script setup>
import { ref } from 'vue'
import { Pagination } from '@vuetify/v0'
const page = ref(1)
</script>
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.Status class="sr-only" />
<Pagination.First>First</Pagination.First>
<Pagination.Prev>Prev</Pagination.Prev>
<template v-for="item in items" :key="item.value">
<Pagination.Item v-if="item.type === 'page'" :value="item.value">
{{ item.value }}
</Pagination.Item>
<Pagination.Ellipsis v-else />
</template>
<Pagination.Next>Next</Pagination.Next>
<Pagination.Last>Last</Pagination.Last>
</Pagination.Root>
</template>
Accessibility
- Root renders as
<nav> by default with aria-label="Pagination"
- Items have
aria-label describing the page number
- Current page has
aria-current="page"
- Navigation buttons have descriptive
aria-label attributes
- Disabled buttons have
data-disabled attribute
- Status component provides live region for screen reader announcements
<template>
<Pagination.Root v-model="page" :size="100">
<Pagination.Status class="sr-only" />
<!-- pagination items -->
</Pagination.Root>
</template>
