📦 vue-toastbar

A modern, customizable Vue 3 toaster library built with TypeScript and TailwindCSS.

🔥 Features

• 📦 Tiny & tree-shakable
• 🌈 Pre-styled with TailwindCSS
• 🧠 Promise-based toasts
• 🎯 Full TypeScript support
• 📱 Responsive design
• 🔧 Easy to configure
• 🚀 Zero dependencies (except Vue 3 and TailwindCSS)

🚀 Installation

npm install vue-toastbar
# or using yarn
yarn add vue-toastbar
# or using pnpm
pnpm add vue-toastbar

🧩 This package uses TailwindCSS — you must configure that in your app.

🛠️ TailwindCSS Setup

If your app doesn't already use Tailwind:

npm install tailwindcss @tailwindcss/vite

Update your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(), 
    tailwindcss()
    ],
})

Add in your global CSS:

@import "tailwindcss";

📦 Usage

1. Import and mount the Toaster component

In App.vue or your root layout:

<script setup lang="ts">
import { Toaster } from 'vue-toastbar'
import 'vue-toastbar/dist/vue-toaster.css'
</script>

<template>
  <Toaster />
  <router-view />
</template>

2. Trigger a toast

import { toast } from 'vue-toastbar'

// Success toast
toast.success('Operation completed successfully!')

// Error toast
toast.error('Something went wrong!')

// Info toast
toast.info('Did you know?')

// Warning toast
toast.warning('Please be careful!')

3. Async Toasts (For API Calling)

// Promise-based toast
const promise = async () => {
  // Your async operation
}

await APIToast(
    promise, 
    'API Data Loaded Successfully!', 
    { progress: 'Loading Data' }
);

4. Optional: If any module declaration error occurs

Add in your vite-env.d.ts:

declare module 'vue-toastbar'

🔧 API Reference

Toast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | duration | number | 4000 | Toast duration in milliseconds |

APIToast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | duration | number | 4000 | Toast duration in milliseconds | | progress | string | Loading | Loading message while api calling | | error | string | An error occurred | error message to display if any error occurs |

Toaster Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | string | bottom-right | Toaster position in application | | enableActions| boolean | true | Enabled or disabled the toaster close button |

Toast Methods

• toast.success(message, options?)
• toast.error(message, options?)
• toast.info(message, options?)
• toast.warning(message, options?)
• APIToast(promise, messages, options?)

🎨 Customization

You can customize the toaster by disabling actions or change the toaster position or even add styling using TailwindCSS classes:

<Toaster 
  :position="top"
  :enableActions=false
/>

📝 License

MIT License - see the LICENSE file for details