Skip to main content

​
VPagination

The VPagination component provides pagination controls for navigating through large datasets. It features responsive design, keyboard navigation, and extensive customization options.

​
Basic Usage

<template>
  <v-pagination
    v-model="page"
    :length="15"
  />
</template>

<script setup>
import { ref } from 'vue'

const page = ref(1)
</script>

​
Props

​
modelValue
number
Current active page number. Use with v-model.
​
length
number | string
default:"1"
Total number of pages.
​
start
number | string
default:"1"
Starting page number (allows 0-based or 1-based indexing).
​
totalVisible
number | string
Maximum number of page buttons to display. Auto-calculated based on available width if not specified.
​
disabled
boolean
default:"false"
Disables all pagination controls.
​
activeColor
string
Color applied to the active page button.
​
color
string
Color applied to page buttons.
​
showFirstLastPage
boolean
default:"false"
Whether to show first and last page navigation buttons.
​
firstIcon
IconValue
default:"'$first'"
Icon for the first page button.
​
prevIcon
IconValue
default:"'$prev'"
Icon for the previous page button.
​
nextIcon
IconValue
default:"'$next'"
Icon for the next page button.
​
lastIcon
IconValue
default:"'$last'"
Icon for the last page button.
​
ellipsis
string
default:"'...'"
Text displayed for page ellipsis.
​
ariaLabel
string
default:"'$vuetify.pagination.ariaLabel.root'"
ARIA label for the pagination navigation.
​
pageAriaLabel
string
default:"'$vuetify.pagination.ariaLabel.page'"
ARIA label template for page buttons.
​
currentPageAriaLabel
string
default:"'$vuetify.pagination.ariaLabel.currentPage'"
ARIA label template for the current page button.
​
firstAriaLabel
string
default:"'$vuetify.pagination.ariaLabel.first'"
ARIA label for first page button.
​
previousAriaLabel
string
default:"'$vuetify.pagination.ariaLabel.previous'"
ARIA label for previous page button.
​
nextAriaLabel
string
default:"'$vuetify.pagination.ariaLabel.next'"
ARIA label for next page button.
​
lastAriaLabel
string
default:"'$vuetify.pagination.ariaLabel.last'"
ARIA label for last page button.
​
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing of buttons.
​
size
string | number
Size of the pagination buttons.
​
variant
'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'
default:"'text'"
Button variant style.
​
rounded
string | number | boolean
Border radius of buttons.
​
border
boolean | string | number
Border style for buttons.
​
elevation
string | number
Elevation depth of buttons.
​
tag
string
default:"'nav'"
HTML tag for the root element.

​
Events

​
update:modelValue
(value: number) => void
Emitted when the page changes.
​
first
(value: number) => void
Emitted when navigating to the first page.
​
prev
(value: number) => void
Emitted when navigating to the previous page.
​
next
(value: number) => void
Emitted when navigating to the next page.
​
last
(value: number) => void
Emitted when navigating to the last page.

​
Slots

​
item
{ isActive: boolean, key: string | number, page: string, props: object }
Slot to customize individual page buttons.
​
first
{ icon: IconValue, onClick: Function, disabled: boolean, aria-label: string, aria-disabled: boolean }
Slot to customize the first page button.
​
prev
{ icon: IconValue, onClick: Function, disabled: boolean, aria-label: string, aria-disabled: boolean }
Slot to customize the previous page button.
​
next
{ icon: IconValue, onClick: Function, disabled: boolean, aria-label: string, aria-disabled: boolean }
Slot to customize the next page button.
​
last
{ icon: IconValue, onClick: Function, disabled: boolean, aria-label: string, aria-disabled: boolean }
Slot to customize the last page button.

​
Navigation Patterns

​
With First and Last Buttons

<template>
  <v-pagination
    v-model="page"
    :length="15"
    show-first-last-page
  />
</template>

​
Limited Visible Pages

<template>
  <v-pagination
    v-model="page"
    :length="100"
    :total-visible="7"
  />
</template>

​
Custom Styling

<template>
  <v-pagination
    v-model="page"
    :length="10"
    active-color="primary"
    variant="elevated"
    rounded="circle"
  />
</template>

​
Compact Size

<template>
  <v-pagination
    v-model="page"
    :length="10"
    density="compact"
    size="small"
  />
</template>

​
Keyboard Navigation

  • Arrow Left: Navigate to previous page
  • Arrow Right: Navigate to next page

​
Examples

​
Event Handling

<template>
  <v-pagination
    v-model="page"
    :length="10"
    @first="onFirst"
    @prev="onPrev"
    @next="onNext"
    @last="onLast"
  />
</template>

<script setup>
import { ref } from 'vue'

const page = ref(1)

function onFirst(value) {
  console.log('First page:', value)
}

function onPrev(value) {
  console.log('Previous page:', value)
}

function onNext(value) {
  console.log('Next page:', value)
}

function onLast(value) {
  console.log('Last page:', value)
}
</script>

​
Zero-Based Indexing

<template>
  <v-pagination
    v-model="page"
    :length="10"
    :start="0"
  />
</template>

<script setup>
import { ref } from 'vue'

const page = ref(0)
</script>

​
Custom Page Rendering

<template>
  <v-pagination
    v-model="page"
    :length="10"
  >
    <template #item="{ page, isActive, props }">
      <v-btn
        v-bind="props"
        :color="isActive ? 'primary' : 'default'"
      >
        Page {{ page }}
      </v-btn>
    </template>
  </v-pagination>
</template>

​
Responsive Pagination

The component automatically adjusts the number of visible pages based on available screen width when totalVisible is not specified: 
<template>
  <v-pagination
    v-model="page"
    :length="50"
  />
</template>

​
Accessibility

  • Uses semantic <nav> element with role="navigation"
  • Provides ARIA labels for all navigation controls
  • Sets aria-current on the active page
  • Supports keyboard navigation
  • Properly marks disabled states with aria-disabled

Build docs developers (and LLMs) love

Get started for freeTalk to us