# Usetoast > useToast documentation and resources. Use this skill when working with useToast or when the user mentions usetoast. - Skill: `hk-vk/usetoast` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add hk-vk/usetoast` - Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/usetoast/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Docs & Writing - Author: hk-vk (https://skillmd.com/u/hk-vk) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/hk-vk/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`{.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`{.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.