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.
Pagination by default displays the number of pages based on the set length
prop, with prev
and next
buttons surrounding to help you navigate.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
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.
You can also manually set the maximum number of visible page buttons with the total-visible
prop.
The circle
prop gives you an alternate style for pagination buttons.
Previous and next page icons can be customized with the prev-icon
and next-icon
props.
Pagination items can be manually deactivated using the disabled
prop.
Ready for more? Continue reading with: