@rozie-ui/toast-vue

@rozie-ui/toast-vue

Idiomatic vue Toaster — a headless, accessible toast / notification host (a live-region queue with per-toast auto-dismiss timers, hover-to-pause, six corner positions, and a per-toast close button) compiled from one Rozie source. It is not a global singleton + context system: the host owns the queue + timers as internal state and exposes an imperative show / dismiss / clear handle you drive via ref — "call from anywhere" is your app's wiring concern (stash the ref). Every visual value is a CSS custom property, so it re-skins to any design system. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/toast-vue

Peer dependencies: vue. Install them alongside this package.

Also installed: @rozie/runtime-vue — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. This build imports nothing from it today, so it shakes out of your bundle entirely. What's in it and what it costs.

Usage

<script setup lang="ts">
import { ref } from 'vue';
import Toaster from '@rozie-ui/toast-vue';

const toaster = ref();          // template ref → the imperative handle
</script>

<template>
  <button @click="toaster.show({ message: 'Saved!', type: 'success' })">Save</button>
  <button @click="toaster.show({ message: 'Something failed', type: 'error' })">Fail</button>
  <button @click="toaster.show({ message: 'Conversation archived', data: { threadId: 't42' }, action: { label: 'Undo', onClick: (ctx) => restore(ctx.data.threadId) } })">Archive</button>

  <!-- Mount the host once (typically near the app root). -->
  <Toaster ref="toaster" position="bottom-right" :duration="4000" />

  <!-- Custom per-toast chrome via the #toast scoped slot:
  <Toaster ref="toaster">
    <template #toast="{ toast, dismiss }">
      <strong>{{ toast.type }}</strong> {{ toast.message }}
      <button @click="dismiss(toast.id)">OK</button>
    </template>
  </Toaster>
  -->
</template>

Theming

Every visual value is a --rozie-toast-* CSS custom property — override any of them at any ancestor scope. Ready-made design-system bridges ship in the package:

import '@rozie-ui/toast-vue/themes/shadcn.css';    // or material.css, bootstrap.css, base.css

Props

Events

Imperative handle

The component has no events — its primary API is an imperative handle (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call the methods directly. None of the verbs overrides an inherited host-element member, so the Lit custom element emits no ROZ137 warning:

<script setup>
import { ref } from 'vue';
const toaster = ref();          // template ref
</script>

<template>
  <Toaster ref="toaster" />
  <button @click="toaster.show({ message: 'Saved', type: 'success' })">Notify</button>
  <button @click="toaster.clear()">Clear all</button>
</template>

Slots