Pagination
Composable page-number navigation. Combine PaginationFirst/Last/Previous/Next with PaginationItem and PaginationEllipsis to build any layout.
When to use Pagination vs PaginationCustom
Pagination gives you primitives to assemble. PaginationCustom is a pre-assembled single-component shortcut for the common case (current page + total).
Default
Number bar with prev/next, first/last, and ellipsis for long ranges.
With edges
showEdges keeps the first and last page visible even on long ranges.
Controlled
Bind v-model:page to a ref so the active page is reflected outside the component.
Current page: 1
API Reference
Props, events, and slots for each sub-component.
Pagination
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | 1 | Current page. Supports v-model. |
| total | number | 0 | Total number of items. |
| itemsPerPage | number | 10 | How many items per page. |
| siblingCount | number | 1 | Sibling pages around the current page. |
| showEdges | boolean | false | Always show first and last page numbers. |
Events
| Event | Description |
|---|---|
| update:page | Fires when the page changes. Enables v-model:page. |
Slots
| Slot | Description |
|---|---|
| default | Scoped slot exposing { page, pageCount } to build the content row. |
PaginationContent / PaginationItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | (PaginationItem) Page number this button selects. Content lays out the items. |
PaginationFirst / PaginationPrevious / PaginationNext / PaginationLast
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Edge navigation buttons. Default slot overrides the icon. Forwards to reka-ui. |
PaginationEllipsis
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Placeholder shown where page numbers are collapsed. |