Nuxt UI v4 is officially released!

Components

Meter

GitHub
Display a gauge meter that fills or depletes.

Usage

Use the value prop from 0 to 100 to set a value for the meter bar.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
Check out the Range component for inputs

Min & Max

By default, min is 0 and max is 100. You can change either of these using their respective props, even for negative numbers.

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

Indicator

You may show a percentage indicator on top of the meter using the indicator prop.

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

Label

Add a label below the meter using the label prop.

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

Icon

You may also add an icon to the start label using the icon prop.

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

Size

Change the size of the meter bar using the size prop.

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

Style

The color prop changes the visual style of the meter bar. The color can be any color from the ui.colors object.

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

Group

To group multiple meters into a group, adding all values, use the MeterGroup component.

  • To change the overall minimum and maximum value, pass the min and max props respectively.
  • To change size of all meters, use the size prop.
  • To show an indicator for the overall amount, set the indicator prop or slot.
  • To change the color of each meter, use the color prop.
  • To show a label for each meter, use the label prop on each meter.
  • To change the icon for each meter, use the icon prop.
67%
  1. System (19%)
  2. Apps (6%)
  3. Documents (9%)
  4. Multimedia (33%)
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
When the Meters are grouped, their individual indicators and label slots are stripped away.

A Meter group can also be used with an indicator slot, and even individual meter icons.

86GB used

42GB remaining

  1. System (19%)
  2. Apps (6%)
  3. Documents (9%)
  4. Multimedia (33%)
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

indicator

Use the #indicator slot to change the indicator shown at the top of the bar. It receives the current meter percent.

84.2GB used (35%) 
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

label

The label slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.

You are using 84GB (65%) of space 

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

Props

ui
{ wrapper?: string; indicator?: DeepPartial<{ container: string; text: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; meter?: DeepPartial<{ base: string; background: string; color: string; ring: string; rounded: string; shadow: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; appearance: { inner: string; meter: string; bar: string; value: string; }; bar: { transition: string; ring: string; rounded: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }; }, any>; label?: DeepPartial<{ base: string; text: string; color: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; color?: DeepPartial<{ white: string; black: string; gray: string; }, any>; default?: DeepPartial<{ size: string; color: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl"
config.default.size
value
number
0
label
string
null
color
MeterColor
config.default.color
"primary""white""gray""black""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
icon
string
null
min
number
0
max
number
100
indicator
boolean
false
size
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"
meterConfig.default.size
min
number
0
max
number
100
icon
string
meterGroupConfig.default.icon
ui
{ wrapper?: string; base?: string; background?: string; transition?: string; rounded?: string; shadow?: string; list?: string; orientation?: DeepPartial<{ 'rounded-none': { left: string; right: string; }; 'rounded-sm': { left: string; right: string; }; rounded: { left: string; right: string; }; 'rounded-md': { left: string; right: string; }; 'rounded-lg': { left: string; right: string; }; 'rounded-xl': { left: string; right: string; }; 'rounded-2xl': { left: string; right: string; }; 'rounded-3xl': { left: string; right: string; }; 'rounded-full': { left: string; right: string; }; }, any>; default?: DeepPartial<{ size: string; icon: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
indicator
boolean
false

Config

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

Link

Render a NuxtLink but with superpowers.

Modal

Display a modal within your application.