This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Pagination

The v-pagination component is used to separate long sets of data so that it is easier for a user to consume information. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a v-model attribute.

Usage

Pagination by default displays the number of pages based on the set length prop, with prev and next buttons surrounding to help you navigate.

v-pagination/usage.vue

API

Examples

Props

Rounded

The rounded prop allows you to render pagination buttons with alternative styles.

v-pagination/prop-rounded.vue

Disabled

Pagination items can be manually deactivated using the disabled prop.

v-pagination/prop-disabled.vue

Icons

Previous and next page icons can be customized with the prev-icon and next-icon props.

v-pagination/prop-icons.vue

Length

Using the length prop you can set the length of v-pagination, if the number of page buttons exceeds the parent container, it will truncate the list.

v-pagination/prop-length.vue

Total visible

You can also manually set the maximum number of visible page buttons with the total-visible prop.

v-pagination/prop-total-visible.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.