🥐 Vue Simple Toast Component

A Simple Vue 3 toast component with two modes:

• sequential: one toast at a time
• stack: multiple toasts displayed simultaneously

🔗 Demo | GitHub

🚀 How To Use

To use this component in your project:

1. Copy the @lib folder into your project.
2. Register the component globally in your main.ts.

import { createApp } from 'vue';
import App from './App.vue';

// import Toast component
import Toast from '@/lib/toast/Toast.vue';

const app = createApp(App);

// global registration
app.component('Toast', Toast);

app.mount('#app');

Now you can use <Toast mode="sequential" /> or <Toast mode="stack" /> anywhere in your templates.

🧪 Usage - Sequential Mode

Only one toast is shown at a time.

✅ Props

Prop	Type (Default)	Description
intervalTime	number (200) (optional)	Time (in ms) between toasts
durationTime	number (3000) (optional)	Duration (in ms) each toast is visible
toastClass	string (optional)	Custom CSS class for toast
toastStyle	string (optional)	Inline styles for toast

✅ Example

<template>
  <Toast mode="sequential" ref="toast" />
  <button @click="showToast1">open Toast1</button>
  <button @click="showToast2">open Toast2</button>
</template>

<script setup>
import { useTemplateRef } from 'vue';
const toast = useTemplateRef('toast');

function showToast1() {
  toast.value.useToast().add('hello! this is toast message');
}
function showToast2() {
  toast.value.useToast().add('hello! this is toast message2');
}
</script>

🧪 Usage - Stack Mode

Multiple toasts are shown at the same time.

✅ Props

Prop	Type (Default)	Description
durationTime	number (3000) (optional)	Time (in ms) each toast is visible
maxCount	number (5) (optional)	Maximum number of toasts shown at once
gap	number (10) (optional)	Gap (in pixels) between toasts in stack mode
toastClass	string (optional)	Custom CSS class for toast
toastStyle	string (optional)	Inline styles for toast

✅ Example

<template>
  <Toast mode="stack" ref="stackedToast" :max-count="3" />
  <button @click="showToast3">open Toast3</button>
  <button @click="showToast4">open Toast4</button>
</template>

<script setup>
import { useTemplateRef } from 'vue';
const stackedToast = useTemplateRef('stackedToast');

function showToast3() {
  stackedToast.value.useToast().add('hello! this is toast message');
}
function showToast4() {
  stackedToast.value.useToast().add('hello! this is toast message2');
}
</script>

💅 Customization

You can apply your own styles using the toastClass and toastStyle props.

<Toast
  mode="stack"
  toastClass="my-toast"
  toastStyle="background: #222; color: #fff;"
/>

📦 Features

• ✅ Composable API (useToast().add(...))
• ✅ Two display modes: sequential / stack
• ✅ Custom class/style support