export default defineAppConfig({

toaster: {

position: 'bottom-right' as const,

expand: true,

duration: 5000

duration: 5000,

max: 5,

expand: true

},

theme: {

radius: 0.25,

<script setup lang="ts">

const appConfig = useAppConfig()

</script>

<template>

<div>

<UFormField

label="toaster.max"

size="sm"

:ui="{

wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',

label: 'text-muted px-2 py-1.5',

container: 'mt-0'

}"

class="inline-flex ring ring-accented rounded-sm"

>

<UInput

v-model="appConfig.toaster.max"

color="neutral"

variant="soft"

:ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"

/>

</UFormField>

</div>

</template>

:toaster-duration-example

::

::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L5"}

::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L4"}

In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.

::

### Stacked toasts

### Change global max :badge{label="Soon"}

Set the `toaster.expand` prop to `false` on the [App](/docs/components/app#props) component to display stacked toasts.

Change the `toaster.max` prop on the [App](/docs/components/app#props) component to change the max number of toasts displayed at once.

::tip

You can hover over the toasts to expand them. This will also pause the timer of the toasts.

```vue [app.vue]

<script setup lang="ts">

const toaster = { max: 3 }

</script>

<template>

<UApp :toaster="toaster">

<NuxtPage />

</UApp>

</template>

```

::component-example

---

prettier: true

name: 'toast-example'

---

#options

:toaster-max-example

::

::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L5"}

In this example, we use the `AppConfig` to configure the `max` prop of the `Toaster` component globally.

::

### Stacked toasts

Set the `toaster.expand` prop to `false` on the [App](/docs/components/app#props) component to display stacked toasts (inspired by [Sonner](https://sonner.emilkowal.ski/)).

```vue [app.vue]

<script setup lang="ts">

const toaster = { expand: true }

</template>

```

::tip

You can hover over the toasts to expand them. This will also pause the timer of the toasts.

::

::component-example

---

prettier: true

:toaster-expand-example

::

::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L4"}

::note{to="https://github.com/nuxt/ui/blob/v4/docs/app/app.config.ts#L6"}

In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.

::

dir: 'ltr',

toaster: {

position: 'bottom-right' as const,

expand: true,

duration: 5000

duration: 5000,

max: 5,

expand: true

},

ui: {

colors: {

<UCheckbox v-model="appConfig.toaster.expand" label="Expand" />

<USelect v-model="appConfig.toaster.position" :items="positions" placeholder="Position" />

<UInput v-model="appConfig.toaster.duration" label="Duration" type="number" />

<UInput v-model="appConfig.toaster.max" label="Max" type="number" />

</Navbar>

<div class="flex items-center gap-2">

* @defaultValue true

*/

portal?: boolean | string | HTMLElement

/**

* Maximum number of toasts to display at once.

* @defaultValue 5

*/

max?: number

class?: any

ui?: Toaster['slots']

}

</script>

<script setup lang="ts">

import { ref, computed, toRef } from 'vue'

import { ref, computed, toRef, provide } from 'vue'

import { ToastProvider, ToastViewport, ToastPortal, useForwardProps } from 'reka-ui'

import { reactivePick } from '@vueuse/core'

import { useAppConfig } from '#imports'

import { useToast } from '../composables/useToast'

import { useToast, toastMaxInjectionKey } from '../composables/useToast'

import { usePortal } from '../composables/usePortal'

import { omit } from '../utils'

import { tv } from '../utils/tv'

expand: true,

portal: true,

duration: 5000,

progress: true

progress: true,

max: 5

})

defineSlots<ToasterSlots>()

const { toasts, remove } = useToast()

const appConfig = useAppConfig() as Toaster['AppConfig']

provide(toastMaxInjectionKey, toRef(() => props.max))

const providerProps = useForwardProps(reactivePick(props, 'duration', 'label', 'swipeThreshold'))

const portalProps = usePortal(toRef(() => props.portal))

import { ref, nextTick } from 'vue'

import type { Ref, InjectionKey } from 'vue'

import { ref, nextTick, inject } from 'vue'

import { useState } from '#imports'

import type { ToastProps, ToastEmits } from '../types'

import type { EmitsToProps } from '../types/utils'

export const toastMaxInjectionKey: InjectionKey<Ref<number | undefined>> = Symbol('nuxt-ui.toast-max')

export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {

id: string | number

onClick?: (toast: Toast) => void

}

export function useToast() {

const toasts = useState<Toast[]>('toasts', () => [])

const maxToasts = 5

const max = inject(toastMaxInjectionKey, undefined)

const running = ref(false)

const queue: Toast[] = []

await nextTick()

toasts.value = [...toasts.value, toast].slice(-maxToasts)

toasts.value = [...toasts.value, toast].slice(-(max?.value ?? 5))

}

running.value = false