BundyUI

Layout

Toaster

App

Wraps the app to set the language every component renders in and to mount the toast stack.

vue
<UiApp />

Options

One block per prop — what it does, and what it looks like set.

Locale

locale sets the language every component below it renders in, and the locale Intl formats its dates and times with. Import one of the six bundled locales, or build your own with defineLocale().

Keine Daten

Datei hier ablegen

Toaster

App mounts the toast stack for you, so useToast() works anywhere without placing a Toaster by hand. Pass options to position it, or null to render none and place your own.

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

Following the app's language

With @nuxtjs/i18n installed, hand App the locale matching the active language and both halves switch together — your own copy and the library's.

Rewording one string

extendLocale deep-merges over a locale, so you name only what changes. Everything you leave out keeps its shipped wording, in whatever language you started from.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
locale
Locale<Messages>
The bundled English locale.
The language every component below this one renders in, and the locale `Intl` formats dates, times and numbers with. Import one of the six this package ships, or build your own with `defineLocale()`.
toaster
AppToasterProps | null
{}
Options for the `Toaster` this renders for you, so `useToast()` works anywhere in the app without mounting one by hand. Pass `null` to render none — for an app that places its own, or one that shows no toasts.

Slots

Slot
default

Types

ts
type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
ts
interface AppToasterProps {
    /** @defaultValue 'bottom-right' */
    position?: ToasterPosition;

    /** When false, toasts collapse into a peeking stack instead of a fully expanded list. @defaultValue true */
    expand?: boolean;

    /** Maximum number of toasts rendered at once. @defaultValue 5 */
    max?: number;
}
ts
type Messages = (typeof en)["messages"];