Usage

Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Toasts live in a module-level store, so the hook works in any component; render ToastViewport once to give them a place to appear. LayerProvider only supplies the viewport's placement and visible limit.

import { useToast } from '@astryx-vue/core/Toast'

<script setup lang="ts">
import { ToastViewport, useToast } from '@astryx-vue/core/Toast'

const toast = useToast()
</script>

<template>
  <button type="button" @click="toast({ body: 'Document saved successfully', type: 'success' })">
    Show toast
  </button>
  <ToastViewport />
</template>

Best practices

Guidance	Practices
Do	Use for transient success/error feedback that does not require user action.
Do	Set uniqueID to deduplicate toasts from rapid user actions.
Do	Render ToastViewport once near the app root, so every toast has a place to appear.
Don't	Use for critical errors that require acknowledgment; use AlertDialog instead.

Examples

Common configurations, variations, and states.

useToast — Show Toast

Imperative toast notifications triggered with useToast and rendered in the toast viewport.