I Built feather-toast-vue — A Lightweight Toast Notification Plugin for Vue 3

While working on Vue 3 projects, I wanted a toast notification library that was:

• lightweight
• easy to set up
• customizable
• TypeScript friendly
• simple enough for small and medium-sized apps

So I decided to build my own: ``.

It’s a lightweight toast notification plugin designed specifically for Vue 3 applications with a clean API and minimal setup.

✨ Features

• ⚡ Lightweight and fast
• 🎨 Customizable toast variants
• 📍 Multiple toast positions
• 🛠️ Vue 3 + Vite support
• 📦 TypeScript support
• ✨ Smooth animations
• 🔧 Easy integration

Installation

`bash
npm install feather-toast-vue
`

Register the Plugin

`ts
import { createApp } from 'vue'
import App from './App.vue'
import FeatherToast from 'feather-toast-vue'

const app = createApp(App)

app.use(FeatherToast)

app.mount('#app')
`

Usage

`ts
$toast.success('Successfully saved!')
$toast.error('Something went wrong!')
$toast.warning('Warning message!')
`

Demo Features

Currently supported:

• Success notifications
• Error notifications
• Warning notifications
• Position support
• Smooth transitions
• Custom styling support

I also created a demo project so developers can quickly test and explore the plugin.

🤔 Why I Built This

There are already great toast libraries in the Vue ecosystem, but I wanted something that felt:

• simpler to configure
• lightweight by default
• beginner-friendly
• easy to customize without extra complexity

This project also helped me learn more about building reusable Vue plugins and improving developer experience.

💬 Feedback Welcome

The project is still evolving, and I’d love feedback from other Vue developers.

Suggestions, feature requests, and contributions are always welcome 🙌

Links

• GitHub Repository: https://github.com/zin-ix/feather-toast-vue
• npm Package: https://www.npmjs.com/package/feather-toast-vue