Nuxt UI v4 is officially released!

Components

Pagination

GitHub
Add a pagination to handle pages.

Usage

Use a v-model to get a reactive page alongside a total which represents the total of items. You can also use the page-count prop to define the number of items per page which defaults to 10.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Max

Use the max prop to set a maximum of displayed pages. Defaults to 7, being the minimum.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the buttons.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Links

Use the to property to transform buttons into links. Note that it must be a function that receives the page number and returns a route destination.

1234510
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable all the buttons.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Active / Inactive

Use the active-button and inactive-button props to customize the active and inactive buttons of the Pagination.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Prev / Next

Use the prev-button and next-button props to customize the prev and next buttons of the Pagination.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

First / Last

Use the first-button and last-button props to customize the first and last buttons of the Pagination.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

prev / next

Use the #prev and #next slots to set the content of the previous and next buttons.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

first / last

Use the #first and #last slots to set the content of the first and last buttons.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

modelValuerequired
number
totalrequired
number
size
ButtonSize
config.default.size
"md""2xs""xs""sm""lg""xl"
max
number
7
ui
{ wrapper?: string; base?: string; rounded?: string; default?: DeepPartial<{ size: string; activeButton: { color: ButtonColor; }; inactiveButton: { color: ButtonColor; }; firstButton: { color: ButtonColor; class: string; icon: string; }; lastButton: { color: ButtonColor; class: string; icon: string; }; prevButton: { color: ButtonColor; class: string; icon: string; }; nextButton: { color: ButtonColor; class: string; icon: string; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
to
(page: number) => string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
null
divider
string
"\u2026"
pageCount
number
10
activeButton
Button
config.default.activeButton as Button
inactiveButton
Button
config.default.inactiveButton as Button
firstButton
Button
config.default.firstButton as Button
lastButton
Button
config.default.lastButton as Button
prevButton
Button
config.default.prevButton as Button
nextButton
Button
config.default.nextButton as Button
disabled
boolean
false
showFirst
boolean
false
showLast
boolean
false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Notification

Display a toast notification in your app.

Popover

Display a non-modal dialog that floats around a trigger element.