Pagination

Component source on Github This page on Github

Reference

v-modelundefined
Number
Current page
base"pagination"
String
Base name used to style component
items-countundefined
Number
Total number of items. Pagination uses this value to compute the number of pages to render. It is usually provided by another component that uses pagination for navigation
items-per-page0
Number
Number of items per page. Pagination uses this value to compute the number of pages to render. It is usually provided by another component that uses pagination for navigation. 0 disables pagination (displays only 1 page)
max-pagesundefined
Number
Maximum number of pages to display. This prop must have value of 3 or more
mod-buttonempty string
String
mod-dotsempty string
String
Style of the dots separating pages
mod-pageempty string
String
Style of the single page button
mod-pagination-barempty string
String
Main pagination bar element
nameempty string
String
Name of the component
variantempty string
String
Active variant of the element mod-* props

Example

For more examples see table documentation.

    <template>
  <v-pagination
    v-model="example.page"
    :items-count="example.itemsCount"
    :items-per-page="example.itemsPerPage"
    :max-pages="example.maxPages"
  />

</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";

let example = reactive({
  page: 1,
  itemsPerPage: 5,
  itemsCount: 50,
  maxPages: 7,
});

let events = ref([]);
</script>