Skip to content

Pagination

The component only handles the rendering of the pagination element. The display of the paginated elements (like table rows) (depending on the page property) must be dealt with separately.

Default Component

js
const items = ["Afghanistan", "Åland Islands", ... , "Yemen", "Zambia", "Zimbabwe"]
const page = ref(1)
const itemsPerPage = 10
const paginatedItems = computed(() => items.slice((page.value - 1) * itemsPerPage, page.value * itemsPerPage))
html
<pagination
    v-model:page="page"
    :per-page="itemsPerPage"
    :total="items.length"
/>
<ul>
    <li v-for="item in paginatedItems">{{ item }}</li>
</ul>

Result

  • Afghanistan
  • Åland Islands
  • Albania
  • Algeria
  • American Samoa
  • Andorra
  • Angola
  • Anguilla
  • Antarctica
  • Antigua and Barbuda

Have Marker Position Below Page Numbers

html
<pagination
    v-model:page="page"
    :per-page="itemsPerPage"
    :total="items.length"
    marker-position="below"
/>
<ul>
    <li v-for="item in paginatedItems">{{ item }}</li>
</ul>

Result

  • Afghanistan
  • Åland Islands
  • Albania
  • Algeria
  • American Samoa
  • Andorra
  • Angola
  • Anguilla
  • Antarctica
  • Antigua and Barbuda

Hide Navigation Buttons and Display All Pages

html
<pagination
    v-model:page="page"
    :per-page="itemsPerPage"
    :total="items.length"
    :show-nav-buttons="false"
    :show-all-pages="true"
/>
<ul>
    <li v-for="item in paginatedItems">{{ item }}</li>
</ul>

Result

  • Afghanistan
  • Åland Islands
  • Albania
  • Algeria
  • American Samoa
  • Andorra
  • Angola
  • Anguilla
  • Antarctica
  • Antigua and Barbuda

Properties

NameTypeDefaultDescription
pageNumber1determines which page index is selected
totalNumber1the number of total items which are paginated
perPageNumber20number of items displayed per page
markerPositionabove or belowaboveAn array of objects determining the appearance and interactivity of each tab
showNavButtonsBooleantrueDetermines whether a "previous" and "next" button will be provided
prevTextStringpreviousLabel of the "previous" button
nextTextStringnextLabel of the "next" button

Events

NameArgumentsDescription
update:pagepage - NumberEmitted when a page index or the "previous"/"next" buttons are clicked