Vue Tailwind Alert Toast

A lightweight, reusable Vue 3 + TailwindCSS alert toast component with success, warning, and danger variants.

✅ Works with Vue 3 ✅ Uses TailwindCSS for styling ✅ Auto-hides after a configurable duration ✅ Smooth slide-in/out animation ✅ Dismissible with a close button

🚀 Installation

Install via NPM:

npm install vue-tailwind-alert-toast

This package assumes you already have Vue 3 and TailwindCSS set up.

If you don’t have Tailwind, follow the official Tailwind setup.

🔧 Setup

1️⃣ Register the plugin globally

In your main.js (or main.ts):

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

// Import the plugin
import AlertToastPlugin from 'vue-tailwind-alert-toast'

// Make sure Tailwind is loaded
import './index.css'

const app = createApp(App)
app.use(AlertToastPlugin)
app.mount('#app')

This registers <AlertToast /> globally.

✅ Basic Usage

Now you can use the component in any Vue template:

<template>
  <div>
    <!-- Trigger buttons -->
    <button @click="showSuccess" class="px-4 py-2 bg-green-500 text-white rounded">Show Success</button>
    <button @click="showWarning" class="px-4 py-2 bg-yellow-500 text-black rounded">Show Warning</button>
    <button @click="showDanger" class="px-4 py-2 bg-red-500 text-white rounded">Show Danger</button>

    <!-- Render alert only when visible -->
    <AlertToast
      v-if="alert.visible"
      :message="alert.message"
      :type="alert.type"
      :duration="3000"
      @close="alert.visible = false"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const alert = reactive({
  visible: false,
  message: '',
  type: 'danger'
})

function showAlert(msg, type = 'danger') {
  alert.message = msg
  alert.type = type
  alert.visible = true
}

function showSuccess() {
  showAlert('✅ OTP Verified successfully!', 'success')
}

function showWarning() {
  showAlert('⚠️ Please enter all fields!', 'warning')
}

function showDanger() {
  showAlert('❌ Invalid OTP!', 'danger')
}
</script>

🎨 Props

| Prop | Type | Default | Description | | ---------- | ------ | -------- | ------------------------------------------------------- | | message | String | required | The alert text you want to display | | type | String | danger | The alert type (success, warning, danger) | | duration | Number | 5000 | Auto-hide duration in ms (set 0 to disable auto-hide) |

🎯 Behavior

✅ Auto-hide after duration (default 5 seconds) ✅ Dismiss manually with close X button ✅ Smooth slide-in/out animation ✅ Positioned at top-right corner of the screen

🛠 TailwindCSS

This component uses TailwindCSS classes:

• bg-green-600 for success
• bg-yellow-500 for warning
• bg-red-600 for danger
• fixed top-4 right-4 px-6 py-3 rounded-md shadow-lg flex items-center

Make sure TailwindCSS is enabled in your project.

🔥 Advanced Usage

You can also import the component locally if you don’t want a global plugin:

<script setup>
import { AlertToast } from 'vue-tailwind-alert-toast'
</script>

<template>
  <AlertToast message="Hello!" type="success" />
</template>

📦 Roadmap

✅ Basic alert toast ✅ Success / Warning / Danger variants ✅ Auto-hide ✅ Manual close button

➡️ Future features (optional):

• Toast stack (multiple alerts at once)
• Global $toast.success('msg') API

📜 License

MIT © 2025 Your Name

💡 Example

Here’s a complete example:

<template>
  <div class="p-6 space-x-2">
    <button @click="showSuccess" class="px-4 py-2 bg-green-500 text-white rounded">Success</button>
    <button @click="showWarning" class="px-4 py-2 bg-yellow-500 text-black rounded">Warning</button>
    <button @click="showDanger" class="px-4 py-2 bg-red-500 text-white rounded">Danger</button>

    <AlertToast
      v-if="alert.visible"
      :message="alert.message"
      :type="alert.type"
      :duration="4000"
      @close="alert.visible = false"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const alert = reactive({
  visible: false,
  message: '',
  type: 'success'
})

function showAlert(msg, type) {
  alert.message = msg
  alert.type = type
  alert.visible = true
}

function showSuccess() {
  showAlert('✅ Saved successfully!', 'success')
}

function showWarning() {
  showAlert('⚠️ Something might be wrong!', 'warning')
}

function showDanger() {
  showAlert('❌ Failed to save data!', 'danger')
}
</script>

🏗 Publishing

Want to contribute?

1. Clone the repo
2. Make changes
3. Run npm publish --access public