Toast Stack

Usage

<script setup>
const toasts = useToasts()

if (!process.server) {
  toasts.value.push(
    {
      uid: `tnt-toast-${_uniqueId()}`,
      duration: 10000, // default = 10000; set to 0 for infinite toast
      color: 'primary',
      body: [
        { is: 'strong', props: { class: 'text-lg' }, content: 'Error' },
        { is: 'p', content: 'This is text.' },
      ],
      actions: [
        { is: 'Icon', props: { class: 'text-2xl', name: 'fa6-solid:info' } }
      ]
    },
  )
}
</script>

Example

Or try adding some demo toasts to the built-in toast stack: