Navigation
Pagination
Page-number controls for navigating a paged list, with sibling/boundary truncation.
<UiPagination :total="..." />Model value
modelValue is the current page, two-way bound.
Page 1
Total
requiredtotal is the number of items being paginated, not the page count — the page count is derived from this and itemsPerPage.
total is the item count, not the page count — page count is derived internally from total and the (fixed) items-per-page.
Items per page
itemsPerPage sets how many items fit on a page. The same total splits into more or fewer pages as this changes.
Sibling count
siblingCount sets how many page buttons sit on either side of the current one.
sibling-count controls how many page numbers show on each side of the current page before collapsing into …; it doesn't affect whether edges (show-edges) show.
Show edges
showEdges keeps the first and last page reachable in one click, however far away the current page is.
Show controls
showControls are the previous/next arrows.
Disabled
disabled disables all pagination interactions.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Emits
update:modelValue[value: number]Types
type PageItem = number | "dots";