Pagination
Page controls for moving through a long list of items.
<template> <Pagination v-model:page="page" :total="total" :items-per-page="itemsPerPage" /></template>Props
| Name | Type | Default |
|---|---|---|
| total | number | - |
| itemsPerPage | number | - |
| modelValue | number | - |
| siblingCount | number | 2 (UPagination's own default) |
| prevLabel | string | "Previous" |
| nextLabel | string | "Next" |
Guidelines
Do
- Use this for paging through a long list or table once it exceeds one page's worth of items.
- Pass translated
prevLabel/nextLabelfrom an i18n-aware consumer (e.g.apps/frontend) - this package has no i18n dependency of its own, so the defaults are plain English. - Keep
siblingCountin sync with a prefetch-ahead composable, if one is in play - it needs to know exactly how many pages are reachable in one click.
Don't
- Don't use this for a multi-step flow with discrete named steps - use
Stepper(unlabeled) orStepperVertical(labeled) instead.