Usetoast

useToast

Available Resources

Setup

Options

Continuous releases

Setup

Options

Continuous releases

What is Nuxt UI?

What's new in v4?

Core technologies

• WAI-ARIA authoring practices
  • URL: https://reka-ui.com/docs/overview/accessibility

Key features

• Icons: Access 200,000+ icons from Iconify

  • URL: https://ui.nuxt.com/docs/getting-started/integrations/icons

• Fonts: Plug-and-play web font optimization and configuration

  • URL: https://ui.nuxt.com/docs/getting-started/integrations/fonts

• Color Mode: Dark and Light mode with auto detection

  • URL: https://ui.nuxt.com/docs/getting-started/integrations/color-mode

• i18n: Internationalize your components with 50+ languages

  • URL: https://ui.nuxt.com/docs/getting-started/integrations/i18n

• Content: Beautiful typography out of the box

  • URL: https://ui.nuxt.com/docs/getting-started/integrations/content

• Vue Generics

  • URL: https://vuejs.org/api/sfc-script-setup.html#generics

FAQ

Setup

Options

Continuous releases

Setup

Options

Continuous releases

Migrate your project

Changes from v3

Migrate your project

Changes from v2

• app.config.ts

  • URL: https://ui.nuxt.com/docs/getting-started/theme/components#global-config

• ui props

  • URL: https://ui.nuxt.com/docs/getting-started/theme/components#ui-prop

• App

  • URL: https://ui.nuxt.com/docs/components/app

• TanStack Table

  • URL: https://tanstack.com/table/latest

AI assistance New

Project structure

CLI

Submit a Pull Request (PR)

• instructions

  • URL: https://github.com/nuxt/ui/blob/v4/.github/PULL_REQUEST_TEMPLATE.md?plain=1

• Conventional Commits

  • URL: https://www.conventionalcommits.org/

Thanks

Tailwind CSS

Colors

Colors

Text

Background

Border

Radius

Container

Header

Body

Tailwind Variants

Customize theme

Usage

Collections

Theme

Usage

Theme

Usage

Usage

Usage

Usage

Supported languages

Usage

Supported languages

Installation

Configuration

Components

• ContentSearch

  • URL: https://ui.nuxt.com/docs/components/content-search

• ContentNavigation

  • URL: https://ui.nuxt.com/docs/components/content-navigation

• ContentToc

  • URL: https://ui.nuxt.com/docs/components/content-toc

• ContentSurround

  • URL: https://ui.nuxt.com/docs/components/content-surround

Typography

Utils

Usage

What is MCP?

Available Resources

Available Tools

Available Prompts

Configuration

• Link: In the Connectors tab, create a new connector:

• Give it a name: Nuxt UI

• MCP server URL: `

• Authentication: None

  • URL: https://ui.nuxt.com/mcp`

• Link: Create your Custom MCP Connector:

• Connector Name: NuxtUI

• Connector Server: `

  • URL: https://ui.nuxt.com/mcp`

Usage Examples

What is LLMs.txt?

Available routes

Choosing the Right File

Important usage notes

Usage with AI Tools

• Link: "Using Nuxt UI documentation from <

  • URL: https://ui.nuxt.com/llms.txt>{rel=""nofollow""}"

• Link: "Follow complete Nuxt UI guidelines from <

  • URL: https://ui.nuxt.com/llms-full.txt>{rel=""nofollow""}"

What are Skills?

Usage Skill

• skills/nuxt-ui/SKILL.md

  • URL: https://github.com/nuxt/ui/tree/v4/skills/nuxt-ui/SKILL.md

• skills/nuxt-ui/

  • URL: https://github.com/nuxt/ui/tree/v4/skills/nuxt-ui

Contributing Skill

Usage

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Plugins

Examples

API

Theme

Changelog

Usage

Examples

• MDC

  • URL: https://github.com/nuxt-modules/mdc?tab=readme-ov-file#mdc

• ContentRenderer

  • URL: https://content.nuxt.com/docs/components/content-renderer

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Components

Installation

Server Setup

Client Setup

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

• value?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#value-key

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Changelog

Usage

Examples

API

Changelog

Usage

API

Changelog

Usage

Examples

API

Changelog

Usage

Examples

API

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• ignoreFilter?: boolean{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-ignore-filter

• Link: [postFilter?: (searchTerm: string, items: T[]) => T[]{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}](

  • URL: https://ui.nuxt.com/#with-post-filtered-items)

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• type?: "link" | "label" | "separator" | "checkbox"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-checkbox-items

• color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-color-items

• checked?: boolean{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-checkbox-items

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-custom-slot

• onUpdateChecked?: (checked: boolean) => void{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-checkbox-items

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• type?: "link" | "label" | "separator" | "checkbox"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-checkbox-items

• color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-color-items

• checked?: boolean{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-checkbox-items

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-custom-slot

• onUpdateChecked?: (checked: boolean) => void{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-checkbox-items

• filter?: boolean | InputProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-filter-items

Examples

API

Theme

Changelog

Usage

• StarterKit

  • URL: https://ui.nuxt.com/#starter-kit

• Placeholder

  • URL: https://ui.nuxt.com/#placeholder

Examples

• FileUpload

  • URL: https://ui.nuxt.com/docs/components/file-upload

• streamText

  • URL: https://ai-sdk.dev/docs/reference/ai-sdk-core/stream-text#streamtext

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• kind?: "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "taskList" | "codeBlock" | "horizontalRule" | "paragraph" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/docs/components/editor#handlers

API

Theme

Changelog

Usage

• kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "taskList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/docs/components/editor#handlers

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-link-popover

Examples

• Popover
  • URL: https://ui.nuxt.com/docs/components/popover

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

• Standard Schema
  • URL: https://github.com/standard-schema/standard-schema

API

className:

• text-toned
• mt-1

| validate(opts: { name?: keyof T | (keyof T)[], silent?: boolean, nested?: boolean, transform?: boolean }){.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} | Promise<T>{.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} :br ::div

className:

• text-toned
• mt-1

| clear(path?: keyof T | RegExp){.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} | void :br ::div

className:

• text-toned
• mt-1

| getErrors(path?: keyof T | RegExp){.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} | FormError[]{.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} :br ::div

className:

• text-toned
• mt-1

| setErrors(errors: FormError[], name?: keyof T | RegExp){.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} | void :br ::div

className:

• text-toned
• mt-1

| errors{.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} | Ref<FormError[]>{.language-ts-type.shiki.shiki-themes.material-theme-lighter.material-theme.material-theme-palenight lang="ts-type"} :br ::div

className:

• text-toned
• mt-1

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• type?: "label" | "separator" | "item"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-items-type

• icon?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-icons-in-items

• avatar?: AvatarProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-avatar-in-items

• chip?: ChipProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-chip-in-items

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

IntelliSense

API

Theme

Changelog

Usage

API

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• chip?: boolean | ChipProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-chip-in-items

• tooltip?: TooltipProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-tooltip-in-items

• popover?: PopoverProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-popover-in-items

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

• value?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#value-key

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

• value?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#value-key

• type?: "label" | "separator" | "item"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-items-type

• icon?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-icons-in-items

• avatar?: AvatarProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-avatar-in-items

• chip?: ChipProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-chip-in-items

Examples

API

Theme

Changelog

Usage

• type?: "label" | "separator" | "item"{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-items-type

• icon?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-icons-in-items

• avatar?: AvatarProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-avatar-in-items

• chip?: ChipProps{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}

  • URL: https://ui.nuxt.com/#with-chip-in-items

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

• footer: [The footer to display for the column. Works exactly like header, but is displayed under the table.]{.text-muted}

  • URL: https://ui.nuxt.com/#with-column-footer

• colspan: - td: [The colspan attribute to apply to the td element.]{.text-muted}

  • URL: https://ui.nuxt.com/#with-column-span

Examples

API

Theme

Changelog

Usage

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

Examples

API

Changelog

Usage

• slot?: string{.shiki,shiki-themes,material-theme-lighter,material-theme,material-theme-palenight lang="ts-type"}
  • URL: https://ui.nuxt.com/#with-custom-slot

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

Examples

API

Theme

Changelog

Usage

API

Theme

Changelog

Usage

API

Example

Usage

• useEventListener

  • URL: https://vueuse.org/core/useEventListener/

• KeyboardEvent.key

  • URL: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values

API

Examples

Usage

API

Example

Usage

API

Examples

Usage

Usage

API

Instance API

Examples

Caveats

Usage

API

Examples

Usage

API

How to Use This Skill

Reference these resources when working with useToast.