BasePagination

Pagination component

Props

Prop name	Description	Type	Values	Default
total	specify the total number of pages	number	-	null
modelValue	currently active page number	number	-	1
useLinkElement	specify if pagination elements should be links - specify a vue link element (as string e.g. 'RouterLink or pass the component directly) or set the variable false if element should not be a link (this needs vue-router) currently only vue components (like 'RouterLink' or 'NuxtLink') are supported! caveat: if you are using Nuxt the string 'NuxtLink' is not enough, but you need to import the component as import { NuxtLink } from '#components'; and pass the component to the prop!	string|boolean|object	-	false
assistiveText	this prop gives the option to add assistive text for screen readers properties: currentPage: aria-label for the current page nextPage: aria-label for the next page pagination: aria-label for the pagination element description previousPage: aria-label for the previous page toPage: aria-label for all page buttons except the current one The values of this object might be plain text or a key for an i18n file	object	-	{ currentPage: 'Current Page, Page', nextPage: 'Go to next page', pagination: 'Pagination', previousPage: 'Go to previous page', toPage: 'Go to page' }

Events

Event name	Properties	Description
update:model-value	undefined number - the new page number	triggered on page select

---

Demo

Adjust the number of pages and resize to see differences in the display.