Pagination
Divide data with pagination when there is too much of it.
Basic Usage
Set the layout property, using commas to separate layout components. Default is prev, pager, next.
With Background Color
Set the background property to add a background color to the pagination buttons.
Extra Features
Enable more features by combining sub-component names in layout. Available sub-components: total (total count), sizes (items per page selector), prev (previous page), pager (page numbers), next (next page), jumper (jump to page), slot (custom content).
Small Pagination
Set the small property to use small-sized pagination, suitable for scenarios with limited space. Buttons and input fields will be correspondingly smaller.
Circle Pagination
Set the circle property to make pagination buttons circular.
Custom Content and Icons
Customize pagination component content or paging icons via slots.
Use in Nuxt
The Pagination component fully supports Nuxt 3/4 SSR rendering. In Nuxt projects, the component is auto-imported.
SSR Features:
- ✅ Supports Server-Side Rendering (SEO-friendly)
- ✅ Automatic Client-Side Hydration
- ✅ Async Data Sync Binding
- ✅ Perfect Compatibility with Nuxt's Auto-import mechanism
TIP
When using pagination with useFetch or useAsyncData in the Nuxt ecosystem, ensure that changing the v-model:current-page variable re-triggers the data request.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
current-page / v-model:current-page | Current page number | number | 1 |
total | Total item count | number | 0 |
page-size / v-model:page-size | Items per page | number | 10 |
page-sizes | Options for the page size selector | number[] | [10, 20, 30, 40, 50, 100] |
layout | Component layout, sub-components separated by commas (Options: prev, pager, next, jumper, total, sizes, slot) | string | 'prev, pager, next' |
pager-count | Maximum number of pager buttons; will fold when total pages exceed this value | number | 7 |
background | Whether to enable background color mode | boolean | false |
circle | Whether to use circular pagination buttons | boolean | false |
small | Whether to use small pagination | boolean | false |
disabled | Whether to disable | boolean | false |
hide-on-single-page | Whether to hide pagination when there's only one page | boolean | false |
prev-text | Text string for the "previous page" button (overrides icon) | string | — |
next-text | Text string for the "next page" button (overrides icon) | string | — |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
size-change | Triggered when pageSize changes | (val: number) => void |
current-change | Triggered when currentPage changes | (val: number) => void |
prev-click | Triggered when user clicks the "previous" button | (val: number) => void |
next-click | Triggered when user clicks the "next" button | (val: number) => void |
Slots
| Slot Name | Description |
|---|---|
prev-icon | Custom previous page icon |
next-icon | Custom next page icon |
default | Custom content (requires slot in layout) |
Expose
| Name | Description | Type |
|---|---|---|
currentPage | Current page number | number |
pageSize | Items per page | number |
pageCount | Total page count | number |
Theme Variables
Customize localized styles by overriding these CSS variables:
| Variable | Default |
|---|---|
--yh-pagination-font-size | 14px |
--yh-pagination-bg-color | transparent |
--yh-pagination-text-color | var(--yh-text-color-regular) |
--yh-pagination-btn-width | 32px |
--yh-pagination-btn-height | 32px |
--yh-pagination-btn-hover-color | var(--yh-color-primary) |
--yh-pagination-item-active-bg-color | var(--yh-color-primary) |
--yh-pagination-item-active-color | #ffffff |