Nuxt UI v4 is officially released!

Components

Divider

GitHub
Display a separator between content.

Usage

You can pass label, icon or avatar to the divider component.

Label

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

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

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

Avatar

Use the avatar prop as an object and configure it with any of its props.

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

Orientation

You can change the orientation of the divider by setting the orientation prop to horizontal or vertical. Defaults to horizontal.

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

Type

You can change the type of the divider by setting the type prop to solid, dotted or dashed. Defaults to solid.

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

Size

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

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

Color

You can change the color of the content by using the ui prop

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

Slots

default

Use the default slot to add content to the divider.

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

Props

type
"solid" | "dotted" | "dashed"
config.default.type
size
DividerSize
config.default.size
"md""2xs""xs""sm""lg""xl"
label
string
null
icon
string
null
ui
{ wrapper?: DeepPartial<{ base: string; horizontal: string; vertical: string; }, any>; container?: DeepPartial<{ base: string; horizontal: string; vertical: string; }, any>; border?: DeepPartial<{ base: string; horizontal: string; vertical: string; size: { horizontal: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; vertical: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; type: { solid: string; dotted: string; dashed: string; }; }, any>; icon?: DeepPartial<{ base: string; }, any>; avatar?: DeepPartial<{ base: string; size: AvatarSize; }, any>; label?: string; default?: DeepPartial<{ size: string; type: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
orientation
"horizontal" | "vertical"
"horizontal"
avatar
Avatar
null

Config

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

DatePicker

An example of a date picker component built with v-calendar.

Dropdown

Display a list of actions in a dropdown menu.