Props
| Name | Description |
|---|---|
align Type: "left" | "center" | "right"Default"right" | Alignment of the pagination control. Places the control inside its full-width row. |
disabled Type: booleanDefaultfalse | Disables the component Disable navigation while the application loads a page. Keep loading feedback on the list; v3 has no |
ellipsis Type: stringDefault"..." | String of text displayed in place of hidden pages. |
label Type: string | Label of the pagination navigation landmark. When unset, falls back to the localized Names the |
maxSize Type: string | numberDefault6 | Maximum number of clickable pages displayed at all times. This has a tolerance of +/- 1 for odd / even numbering. It does not include ellipses. A maximum, not a promise — the strip also drops buttons when the container is too narrow, never below three. The count excludes the ellipses and Previous/Next, with a ±1 tolerance so the window stays balanced around the current page. See example |
modelValue Type: numberDefault1 | Used by v-model. The 1-based index of the current page — pagination starts on the first page, not page |
navigation Type: booleanDefaultfalse | Synchronizes the current page with the URL.
Pair it with Writes the page into the URL; it never reads it. Seed the model from the route once at setup, or a shared link lands on page 1. See example |
perPage Type: string | number | Number of items per page. Together with |
pt Type: (PtMap<BbPaginationPtPart, "disabled"> & { 'item:active'?: PtValue | undefined; }) | Passthrough, object form: the same keys as the |
pt:<part> Type: PtValue | Passthrough, attribute form: one attribute per part, |
queryKey Type: stringDefault"page" | Defines the query key to reference for maintaining navigation. Renamed from v2's all-lowercase |
replace Type: booleanDefaultfalse | Replaces the history entry instead of pushing one when the page changes. Recommended with Effectively mandatory with |
tableId Type: string | Pairs with the Replaces the manual wiring: no |
totalItems Type: string | number | Total number of items across all pages. When set, the page count is derived as With |
totalPages Type: string | number | Total number of pages. A shortcut for when the server reports a page count rather than a row count — a page count derived from The shortcut for a server that reports pages rather than rows. It is only a seed: as soon as a real |
v-model
Values kept in sync through v-model.
| Name | Description |
|---|---|
modelValue Type: number | The application-owned, 1-based page. A standalone pager clamps it; with |
Events
| Name | Description |
|---|---|
update:modelValue Type: (value: number): void | Emitted with the new value whenever The one event, and the only thing worth listening to — which buttons disable and where the ellipses fall is internal. Fetch or slice from the model, never from a click handler on a button. See example |
Slots
The listed properties are the ones exposed to the slot scope.
| Name | Description |
|---|---|
ellipsis Type: Record<string, never> | Replaces the default The fold marker is not a button — it renders as an |
item Type: BbPaginationItemSlotProps | Replaces the default page number button content for each individual page. Repaints a page button; the button, its disabled state and its |
next Type: Record<string, never> | Replaces the default "next page" button content. Same accessibility bill as |
previous Type: Record<string, never> | Replaces the default "previous page" button content. Replacing the chevron also replaces the visually hidden localized label behind it. Put a word in the button, or an |
Renamed and removed
Names from v2 and from earlier 3.0 betas that no longer work, and what to write instead.
loadingremovedfails silentlypt:icon:activeremovedfails silentlyIt never applied anything:
active(the current page) is a state ofitemonly (pt:item:active)pt:root:activeremovedfails silentlyIt never applied anything:
active(the current page) is a state ofitemonly (pt:item:active)querykeyqueryKeyfails silently