HexLabs

Appearance

$toast ​

A lightweight, typesafe toast manager for Vue 3 applications. This system allows you to define a set of toast components and programmatically trigger them from anywhere in your app.

Overview ​

ts
import MyToast from "#components/MyToast.vue"

export const { $toast } = defineToasts({
    success: MyToast,
    error: MyToast,
})

$toast("success").open({
    // prop types inferred from component
    props: { message: "Operation completed!" },
    duration: 2000,
    transition: "slide",
})

API ​

defineToasts(toasts) ​

Registers a collection of toast components upfront.

Parameters ​

  • toasts object: A map of toast keys to Vue components.

Returns ​

  • { $toast }: An object that lets you open and close toasts.

$toast(key).open(options) ​

Triggers a toast to appear on screen.

Parameters ​

  • key string: The key for the toast (must match what you defined in defineToasts).

  • options (optional):

    • props: Props to pass to the toast component.
    • slots: Optional slot content (currently unused).
    • duration: Time in milliseconds before the toast closes automatically (default: 1000ms).
    • position: Currently only supports "bottom".
    • transition: Currently only supports "slide".

Example ​

ts
$toast("error").open({
    props: { message: "Something went wrong." },
    duration: 3000,
})

Implementation Details ​

  • Each toast is mounted to its own DOM element with a unique ID using $id().
  • Toasts are mounted in a full-screen, pointer-events-none container aligned to the bottom center.
  • After the specified duration, the toast unmounts itself with a fade delay of 1.5 seconds.
  • Designed for client-side only (import.meta.client is respected).

Styling Notes ​

You can style your toast components however you like. The toast container is positioned and styled by the library to:

css
position: fixed;
pointer-events: none;
display: flex;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
align-items: flex-end;
justify-content: center;
z-index: 100000;

Gotchas ​

  • This doesn't yet support stacking multiple toasts; the last one will overwrite the DOM container.
  • Manual closing is not yet implemented.
  • Toast content is entirely customizable via props.
  • All logic assumes SSR-safe import.meta.client usage.

Credits ​

Built by the Hexlabs team for internal and client projects. For questions or bugs, reach out on Hexlabs GitHub or via the agency portal.