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.

Go to api


Pagination displays all pages if parent container is big enough.

When the number of page buttons exceeds the parent container, the component will truncate the list.

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

The alternate style for pagination is circle pages.

Pagination items can be manually deactivated.