Toast

A lightweight notification stack for success, warning, error and info messages.

Installation

npx alixan-ui-nuxt add toast

Usage

app.vue

<template>
  <NuxtPage />
  <ToastHost /> <!-- Add ToastHost once near the root. It renders only on the client. -->
</template>

Example.vue

<script setup lang="ts">
const toast = useToast()

const showToast = () => {
  toast.open('Project saved successfully', 'success')
}
</script>

<template>
  <Button @click="showToast">Show toast</Button>
</template>

API Reference

Argument	Type	Default	Description
message	string	-	Toast text.
type	'success' \| 'warning' \| 'error' \| 'info'	'info'	Semantic toast tone.
duration	number	4000	Auto-close timeout in milliseconds.