Composables

useToast

Show notifications. Requires <UApp> wrapper.

const toast = useToast()

toast.add({
  title: 'Success',
  description: 'Item saved',
  color: 'success',       // primary, success, error, warning, info
  icon: 'i-lucide-check-circle',
  duration: 5000,         // 0 = never dismiss
  actions: [{ label: 'Undo', onClick: () => {} }]
})

toast.remove('toast-id')
toast.clear()

useOverlay

Programmatically create modals, slideovers, drawers.

const overlay = useOverlay()

// create() returns a reusable instance with open(), close(), patch()
const modal = overlay.create(MyComponent)

// open() accepts props and returns an object with .result (a Promise)
const { result } = modal.open({ title: 'Confirm' })

if (await result) {
  // User confirmed
}

// Inside the overlay component, emit close with a value:
// emit('close', true) or emit('close', false)

// You can also close from outside:
modal.close(false)

defineShortcuts

Define keyboard shortcuts.

defineShortcuts({
  meta_k: () => openSearch(),        // Cmd+K (Mac) / Ctrl+K (Win)
  meta_shift_p: () => openPalette(), // Cmd+Shift+P
  escape: () => close(),
  ctrl_s: () => save(),

  // With condition
  meta_enter: {
    handler: () => submit(),
    whenever: [isFormValid]
  }
})

Key	Meaning
`meta`	Cmd (Mac) / Ctrl (Windows)
`ctrl`	Ctrl key
`alt`	Alt / Option key
`shift`	Shift key
`_`	Key separator

defineLocale / extendLocale

i18n locale definition.

import { fr } from '@nuxt/ui/locale'

// Use a built-in locale (50+ available)
// <UApp :locale="fr">

// Define custom locale
const locale = defineLocale({
  name: 'Español',
  code: 'es',
  dir: 'ltr',
  messages: {
    select: { placeholder: 'Seleccionar...' }
  }
})

// Extend existing locale
import { en } from '@nuxt/ui/locale'

const customEn = extendLocale(en, {
  messages: { commandPalette: { placeholder: 'Search a component...' } }
})

<UApp :locale="fr"><NuxtPage /></UApp>

extractShortcuts

Extract shortcut keys from a list of items (e.g., dropdown menu items) into a shortcuts map for defineShortcuts.

const items = [
  { label: 'New file', kbds: ['meta', 'n'], onSelect: () => newFile() },
  { label: 'Save', kbds: ['meta', 's'], onSelect: () => save() }
]

defineShortcuts(extractShortcuts(items))

Quick reference

Composable	Purpose
`useToast`	Show notifications
`useOverlay`	Programmatic modals/slideovers
`defineShortcuts`	Keyboard shortcuts
`defineLocale` / `extendLocale`	i18n locale
`extractShortcuts`	Parse shortcut definitions

2.6 KiB Raw Blame History