DEV Community

Cover image for Feather-toast-vue alternative for vue-sonner
Zin
Zin

Posted on

Feather-toast-vue alternative for vue-sonner

#vue #typescript #webdev #opensource

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

Top comments (0)