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

Previous

123...25

Next

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

Have Marker Position Below Page Numbers

<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

Previous

123...25

Next

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

Hide Navigation Buttons and Display All Pages

<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

12345678910111213141516171819202122232425

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

Properties

Name	Type	Default	Description
page	Number	1	determines which page index is selected
total	Number	1	the number of total items which are paginated
perPage	Number	20	number of items displayed per page
markerPosition	above or below	above	An array of objects determining the appearance and interactivity of each tab
showNavButtons	Boolean	true	Determines whether a "previous" and "next" button will be provided
prevText	String	previous	Label of the "previous" button
nextText	String	next	Label of the "next" button

Events

Name	Arguments	Description
update:page	page - Number	Emitted when a page index or the "previous"/"next" buttons are clicked