Movatterモバイル変換

[0]ホーム
URL:

Nuxt UI v3 is officially released.
Buy Nuxt UI Pro
A succinct message to provide information or feedback to the user.

Usage

Use theuseToast composable to display a toast in your application.

Make sure to wrap your app with theApp component which uses ourToaster component which uses theToastProvider component from Reka UI.
You can check theApp componenttoaster prop to see how to configure the Toaster globally.

Title

Pass atitle field to thetoast.add method to display a title.

<script setup lang="ts">const props= defineProps<{  title: string}>()const toast= useToast()function showToast() {  toast.add(props)}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Description

Pass adescription field to thetoast.add method to display a description.

<script setup lang="ts">const props= defineProps<{  title: string  description: string}>()const toast= useToast()function showToast() {  toast.add(props)}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Icon

Pass anicon field to thetoast.add method to display anIcon.

<script setup lang="ts">const props= defineProps<{  icon: string}>()const toast= useToast()function showToast() {  toast.add({    title: 'Uh oh! Something went wrong.',    description: 'There was a problem with your request.',    icon: props.icon  })}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Avatar

Pass anavatar field to thetoast.add method to display anAvatar.

<script setup lang="ts">import type { AvatarProps } from '@nuxt/ui'const props= defineProps<{  avatar: AvatarProps}>()const toast= useToast()function showToast() {  toast.add({    title: 'User invited',    description: 'benjamincanac was invited to the team.',    avatar: props.avatar  })}</script><template>  <UButton label="Invite user" color="neutral" variant="outline" @click="showToast" /></template>

Color

Pass acolor field to thetoast.add method to change the color of the Toast.

<script setup lang="ts">import type { ToastProps } from '@nuxt/ui'const props= defineProps<{  color: ToastProps['color']}>()const toast= useToast()function showToast() {  toast.add({    title: 'Uh oh! Something went wrong.',    description: 'There was a problem with your request.',    icon: 'i-lucide-wifi',    color: props.color  })}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Close

Pass aclose field to customize or hide the close button (withfalse value).

<script setup lang="ts">const toast= useToast()function showToast() {  toast.add({    title: 'Uh oh! Something went wrong.',    description: 'There was a problem with your request.',    icon: 'i-lucide-wifi',    close: {      color: 'primary',      variant: 'outline',      class: 'rounded-full'    }  })}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Close Icon

Pass acloseIcon field to customize the close buttonIcon. Default toi-lucide-x.

<script setup lang="ts">const props= defineProps<{  closeIcon: string}>()const toast= useToast()function showToast() {  toast.add({    title: 'Uh oh! Something went wrong.',    description: 'There was a problem with your request.',    closeIcon: props.closeIcon  })}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>
You can customize this icon globally in yourapp.config.ts underui.icons.close key.
You can customize this icon globally in yourvite.config.ts underui.icons.close key.

Actions

Pass anactions field to add someButton actions to the Alert.

<script setup lang="ts">const toast= useToast()const props= defineProps<{  description: string}>()function showToast() {  toast.add({    title: 'Uh oh! Something went wrong.',    description: props.description,    actions: [{      icon: 'i-lucide-refresh-cw',      label: 'Retry',      color: 'neutral',      variant: 'outline',      onClick: (e) => {        e?.stopPropagation()      }    }]  })}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Orientation

Use theorientation prop to change the orientation of the Toast.

<script setup lang="ts">const toast= useToast()const props= defineProps<{  orientation: 'horizontal' | 'vertical'}>()function showToast() {  toast.add({    title: 'Uh oh! Something went wrong.',    orientation: props.orientation,    actions: [{      icon: 'i-lucide-refresh-cw',      label: 'Retry',      color: 'neutral',      variant: 'outline',      onClick: (e) => {        e?.stopPropagation()      }    }]  })}</script><template>  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" /></template>

Examples

Change global position

Change thetoaster.position prop on theApp component to change the position of the toasts.

<script setup lang="ts">const toast= useToast()function addToCalendar() {  const eventDate = new Date(Date.now()+ Math.random()* 31536000000)  const formattedDate = eventDate.toLocaleDateString('en-US', {    month: 'short',    day: 'numeric',    year: 'numeric'  })  toast.add({    title: 'Event added to calendar',    description: `This event is scheduled for${formattedDate}.`,    icon: 'i-lucide-calendar-days'  })}</script><template>  <UButton    label="Add to calendar"    color="neutral"    variant="outline"    icon="i-lucide-plus"    @click="addToCalendar"  /></template>
In this example, we use theAppConfig to configure theposition prop of theToaster component globally.

Change global duration

Change thetoaster.duration prop on theApp component to change the duration of the toasts.

<script setup lang="ts">const toast= useToast()function addToCalendar() {  const eventDate = new Date(Date.now()+ Math.random()* 31536000000)  const formattedDate = eventDate.toLocaleDateString('en-US', {    month: 'short',    day: 'numeric',    year: 'numeric'  })  toast.add({    title: 'Event added to calendar',    description: `This event is scheduled for${formattedDate}.`,    icon: 'i-lucide-calendar-days'  })}</script><template>  <UButton    label="Add to calendar"    color="neutral"    variant="outline"    icon="i-lucide-plus"    @click="addToCalendar"  /></template>
In this example, we use theAppConfig to configure theduration prop of theToaster component globally.

Stacked toasts

Set thetoaster.expand prop tofalse on theApp component to display stacked toasts.

You can hover over the toasts to expand them. This will also pause the timer of the toasts.
<script setup lang="ts">const toast= useToast()function addToCalendar() {  const eventDate = new Date(Date.now()+ Math.random()* 31536000000)  const formattedDate = eventDate.toLocaleDateString('en-US', {    month: 'short',    day: 'numeric',    year: 'numeric'  })  toast.add({    title: 'Event added to calendar',    description: `This event is scheduled for${formattedDate}.`,    icon: 'i-lucide-calendar-days'  })}</script><template>  <UButton    label="Add to calendar"    color="neutral"    variant="outline"    icon="i-lucide-plus"    @click="addToCalendar"  /></template>
In this example, we use theAppConfig to configure theexpand prop of theToaster component globally.

API

Props

Prop Default Type
as

'li'

any

The element or component this component should render as.

title

string | VNode<RendererNode, RendererElement, { [key: string]: any; }> | (): VNode<RendererNode, RendererElement, { [key: string]: any; }>

description

string | VNode<RendererNode, RendererElement, { [key: string]: any; }> | (): VNode<RendererNode, RendererElement, { [key: string]: any; }>

icon

string

avatar

AvatarProps

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

orientation

'vertical'

"horizontal" | "vertical"

The orientation between the content and the actions.

actions

ButtonProps[]

Display a list of actions:

  • under the title and description when orientation isvertical
  • next to the close button when orientation ishorizontal{ size: 'xs' }
close

true

boolean | Partial<ButtonProps>

Display a close button to dismiss the toast.{ size: 'md', color: 'neutral', variant: 'link' }

closeIcon

appConfig.ui.icons.close

string

The icon displayed in the close button.

type

"foreground" | "background"

Control the sensitivity of the toast for accessibility purposes.

For toasts that are the result of a user action, chooseforeground. Toasts generated from background tasks should usebackground.

defaultOpen

boolean

The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the dialog. Can be bind asv-model:open.

duration

number

Time in milliseconds that toast should remain visible for. Overrides valuegiven toToastProvider.

ui

Partial<{ root: string; wrapper: string; title: string; description: string; icon: string; avatar: string; avatarSize: string; actions: string; progress: string; close: string; }>

Slots

Slot Type
leading

{}

title

{}

description

{}

actions

{}

close

{ ui: any; }

Emits

Event Type
pause

[]

escapeKeyDown

[event: KeyboardEvent]

resume

[]

swipeStart

[event: SwipeEvent]

swipeMove

[event: SwipeEvent]

swipeCancel

[event: SwipeEvent]

swipeEnd

[event: SwipeEvent]

update:open

[value: boolean]

Theme

app.config.ts
export default defineAppConfig({  ui: {    toast: {      slots: {        root: 'relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none',        wrapper: 'w-0 flex-1 flex flex-col',        title: 'text-sm font-medium text-(--ui-text-highlighted)',        description: 'text-sm text-(--ui-text-muted)',        icon: 'shrink-0 size-5',        avatar: 'shrink-0',        avatarSize: '2xl',        actions: 'flex gap-1.5 shrink-0',        progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',        close: 'p-0'      },      variants: {        color: {          primary: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)',            icon: 'text-(--ui-primary)',            progress: 'bg-(--ui-primary)'          },          secondary: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)',            icon: 'text-(--ui-secondary)',            progress: 'bg-(--ui-secondary)'          },          success: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)',            icon: 'text-(--ui-success)',            progress: 'bg-(--ui-success)'          },          info: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)',            icon: 'text-(--ui-info)',            progress: 'bg-(--ui-info)'          },          warning: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)',            icon: 'text-(--ui-warning)',            progress: 'bg-(--ui-warning)'          },          error: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)',            icon: 'text-(--ui-error)',            progress: 'bg-(--ui-error)'          },          neutral: {            root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)',            icon: 'text-(--ui-text-highlighted)',            progress: 'bg-(--ui-bg-inverted)'          }        },        orientation: {          horizontal: {            root: 'items-center',            actions: 'items-center'          },          vertical: {            root: 'items-start',            actions: 'items-start mt-2.5'          }        },        title: {          true: {            description: 'mt-1'          }        }      },      defaultVariants: {        color: 'primary'      }    }  }})
vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uifrom '@nuxt/ui/vite'export default defineConfig({  plugins: [    vue(),    ui({      ui: {        toast: {          slots: {            root: 'relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none',            wrapper: 'w-0 flex-1 flex flex-col',            title: 'text-sm font-medium text-(--ui-text-highlighted)',            description: 'text-sm text-(--ui-text-muted)',            icon: 'shrink-0 size-5',            avatar: 'shrink-0',            avatarSize: '2xl',            actions: 'flex gap-1.5 shrink-0',            progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',            close: 'p-0'          },          variants: {            color: {              primary: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)',                icon: 'text-(--ui-primary)',                progress: 'bg-(--ui-primary)'              },              secondary: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)',                icon: 'text-(--ui-secondary)',                progress: 'bg-(--ui-secondary)'              },              success: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)',                icon: 'text-(--ui-success)',                progress: 'bg-(--ui-success)'              },              info: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)',                icon: 'text-(--ui-info)',                progress: 'bg-(--ui-info)'              },              warning: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)',                icon: 'text-(--ui-warning)',                progress: 'bg-(--ui-warning)'              },              error: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)',                icon: 'text-(--ui-error)',                progress: 'bg-(--ui-error)'              },              neutral: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)',                icon: 'text-(--ui-text-highlighted)',                progress: 'bg-(--ui-bg-inverted)'              }            },            orientation: {              horizontal: {                root: 'items-center',                actions: 'items-center'              },              vertical: {                root: 'items-start',                actions: 'items-start mt-2.5'              }            },            title: {              true: {                description: 'mt-1'              }            }          },          defaultVariants: {            color: 'primary'          }        }      }    })  ]})
vite.config.ts
import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uiProfrom '@nuxt/ui-pro/vite'export default defineConfig({  plugins: [    vue(),    uiPro({      ui: {        toast: {          slots: {            root: 'relative group overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-(--ui-border) p-4 flex gap-2.5 focus:outline-none',            wrapper: 'w-0 flex-1 flex flex-col',            title: 'text-sm font-medium text-(--ui-text-highlighted)',            description: 'text-sm text-(--ui-text-muted)',            icon: 'shrink-0 size-5',            avatar: 'shrink-0',            avatarSize: '2xl',            actions: 'flex gap-1.5 shrink-0',            progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',            close: 'p-0'          },          variants: {            color: {              primary: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)',                icon: 'text-(--ui-primary)',                progress: 'bg-(--ui-primary)'              },              secondary: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-secondary)',                icon: 'text-(--ui-secondary)',                progress: 'bg-(--ui-secondary)'              },              success: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-success)',                icon: 'text-(--ui-success)',                progress: 'bg-(--ui-success)'              },              info: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-info)',                icon: 'text-(--ui-info)',                progress: 'bg-(--ui-info)'              },              warning: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-warning)',                icon: 'text-(--ui-warning)',                progress: 'bg-(--ui-warning)'              },              error: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-error)',                icon: 'text-(--ui-error)',                progress: 'bg-(--ui-error)'              },              neutral: {                root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-border-inverted)',                icon: 'text-(--ui-text-highlighted)',                progress: 'bg-(--ui-bg-inverted)'              }            },            orientation: {              horizontal: {                root: 'items-center',                actions: 'items-center'              },              vertical: {                root: 'items-start',                actions: 'items-start mt-2.5'              }            },            title: {              true: {                description: 'mt-1'              }            }          },          defaultVariants: {            color: 'primary'          }        }      }    })  ]})
[8]ページ先頭
©2009-2025 Movatter.jp