The latest articles on DEV Community by Zin (@zinix). https://dev.to/zinix https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3928249%2F6933faef-1b40-4a93-b796-0fe53bb19ac6.jpeg https://dev.to/zinix en Zin Wed, 13 May 2026 02:19:31 +0000 https://dev.to/zinix/feather-toast-vue-alternative-for-vue-sonner-7o4 https://dev.to/zinix/feather-toast-vue-alternative-for-vue-sonner-7o4 <h1> I Built <code>feather-toast-vue</code> — A Lightweight Toast Notification Plugin for Vue 3 </h1> <p>While working on Vue 3 projects, I wanted a toast notification library that was:</p> <ul> <li>lightweight</li> <li>easy to set up</li> <li>customizable</li> <li>TypeScript friendly</li> <li>simple enough for small and medium-sized apps</li> </ul> <p>So I decided to build my own: ``.</p> <p>It’s a lightweight toast notification plugin designed specifically for Vue 3 applications with a clean API and minimal setup.</p> <h2> ✨ Features </h2> <ul> <li>⚡ Lightweight and fast</li> <li>🎨 Customizable toast variants</li> <li>📍 Multiple toast positions</li> <li>🛠️ Vue 3 + Vite support</li> <li>📦 TypeScript support</li> <li>✨ Smooth animations</li> <li>🔧 Easy integration</li> </ul> <h2> Installation </h2> <p><code>`bash<br> npm install feather-toast-vue<br> `</code></p> <h2> Register the Plugin </h2> <p>`<code></code>ts<br> import { createApp } from 'vue'<br> import App from './App.vue'<br> import FeatherToast from 'feather-toast-vue'</p> <p>const app = createApp(App)</p> <p>app.use(FeatherToast)</p> <p>app.mount('#app')<br> <code></code>`</p> <h2> Usage </h2> <p><code>`ts<br> $toast.success('Successfully saved!')<br> $toast.error('Something went wrong!')<br> $toast.warning('Warning message!')<br> `</code></p> <h2> Demo Features </h2> <p>Currently supported:</p> <ul> <li>Success notifications</li> <li>Error notifications</li> <li>Warning notifications</li> <li>Position support</li> <li>Smooth transitions</li> <li>Custom styling support</li> </ul> <p>I also created a demo project so developers can quickly test and explore the plugin.</p> <h2> 🤔 Why I Built This </h2> <p>There are already great toast libraries in the Vue ecosystem, but I wanted something that felt:</p> <ul> <li>simpler to configure</li> <li>lightweight by default</li> <li>beginner-friendly</li> <li>easy to customize without extra complexity</li> </ul> <p>This project also helped me learn more about building reusable Vue plugins and improving developer experience.</p> <h2> 💬 Feedback Welcome </h2> <p>The project is still evolving, and I’d love feedback from other Vue developers.</p> <p>Suggestions, feature requests, and contributions are always welcome 🙌</p> <h3> Links </h3> <ul> <li>GitHub Repository: <a href="https://github.com/zin-ix/feather-toast-vue" rel="noopener noreferrer">https://github.com/zin-ix/feather-toast-vue</a> </li> <li>npm Package: <a href="https://www.npmjs.com/package/feather-toast-vue" rel="noopener noreferrer">https://www.npmjs.com/package/feather-toast-vue</a> </li> </ul> webdev opensource vue typescript