Nuxt UI v4 is officially released!

Components

Tabs

GitHub
A set of tab panels that are displayed one at a time.

Usage

Pass an array to the items prop of the Tabs component. Each item can have the following properties:

  • label - The label of the item.
  • icon - The icon of the item.
  • slot - A key to customize the item with a slot.
  • content - The content to display in the panel by default.
  • disabled - Determines whether the item is disabled or not.
This is the content shown for Tab1
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Vertical

You can change the orientation of the tabs by setting the orientation prop to vertical.

This is the content shown for Tab1
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Default index

You can set the default index of the tabs by setting the default-index prop.

Finally, this is the content for Tab3
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
This will have no effect if you are using a v-model to control the selected index.

Listen to changes

You can listen to changes by using the @change event. The event will emit the index of the selected item.

This is the content shown for Tab1
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can use the content prop and set it to false to avoid the rendering of the HTML content if you don't need it.

Control the selected index

Use a v-model to control the selected index.

This is the content shown for Tab1
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.

Slots

You can use slots to customize the buttons and items content of the Accordion.

default

Use the #default slot to customize the content of the trigger buttons. You will have access to the item, index, selected and disabled in the slot scope.

This is the content shown for Tab1
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

icon

Use the #icon slot to customize the icon of the trigger buttons. You will have access to the item, index, selected and disabled in the slot scope.

This is the content shown for Tab1
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

item

Use the #item slot to customize the items content. You will have access to the item, index and selected properties in the slot scope.

Account

Make changes to your account here. Click save when you're done.

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

You can also pass a slot property to customize a specific item.

Account

Make changes to your account here. Click save when you're done. 

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

Props

ui
{ wrapper?: string; container?: string; base?: string; list?: DeepPartial<{ base: string; background: string; rounded: string; shadow: string; padding: string; height: string; width: string; marker: { wrapper: string; base: string; background: string; rounded: string; shadow: string; }; tab: { base: string; background: string; active: string; inactive: string; height: string; padding: string; size: string; font: string; rounded: string; shadow: string; icon: string; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
orientation
"horizontal" | "vertical"
"horizontal"
modelValue
number
undefined
defaultIndex
number
0
items
TabItem[]
[]
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
content
boolean
true
unmount
boolean
false

Config

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

Table

Display data in a table.

Textarea

Display a textarea field.