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
Install via NPM:
npm install vue-tailwind-alert-toastThis package assumes you already have Vue 3 and TailwindCSS set up.
If you don’t have Tailwind, follow the official Tailwind setup.
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.
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>| 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) |
✅ 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
This component uses TailwindCSS classes:
-
bg-green-600for success -
bg-yellow-500for warning -
bg-red-600for 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.
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>✅ 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
MIT © 2025 Your Name
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>Want to contribute?
- Clone the repo
- Make changes
- Run
npm publish --access public