Notivue

Overview:

The notivue is a fully-featured notification system designed specifically for Vue and Nuxt projects. It offers a range of customization options and features, allowing developers to enhance the notification experience on their websites or applications.

Features:

• Fully modular: notivue provides a fully modular system, allowing developers to include only the features they need and exclude the ones they don’t.
• Drop-in components: The framework offers drop-in components that can be easily integrated to enhance the notification functionality. This includes features like swipe gestures and keyboard support, which are customizable and optional.
• Headless API: Developers can utilize their own custom notifications while still benefiting from notivue’s handling of the core functionality.
• Promise API: Updating pending notifications is made easy with notivue’s Promise API.
• Ready-made notifications: notivue comes with ready-made notifications that can be easily customized with themes, icons, RTL support, and more.
• Slick transitions and animations: Customize the notification animations using plain CSS.
• Fully accessible: notivue is built with accessibility in mind, offering a built-in screen reader, reduced motion features, and keyboard support.
• Zero dependencies: The framework has no external dependencies and weighs approximately 4.5KB (gzipped).

Installation:

To install notivue for a single-page app (Vite), follow the steps below:

1. Import notivue in your main.js or main.ts file:

   import { createApp } from 'vue';
   import notivue from 'notivue';
   
   // ...
   
   createApp(App).use(notivue).mount('#app');
   

2. Add the notivue component to your main App.vue file:

   <template>
     <div id="app">
       <notivue />
       <!-- Rest of your app -->
     </div>
   </template>
   

3. (For Nuxt projects) Add the notivue plugin to your nuxt.config.js file:

   export default {
     // ...
     plugins: ['notivue']
     // ...
   }
   

4. (For Nuxt projects) Import the notivue component in your main app.vue file:

   <script>
   export default {
     // ...
     components: {
       notivue: () => import('notivue')
     },
     // ...
   }
   </script>
   

Summary:

notivue is a highly customizable notification system built for Vue and Nuxt projects. It offers modular functionality, drop-in components, and a headless API, allowing developers to tailor the notification experience to their specific needs. With ready-made notifications, smooth animations, and full accessibility support, notivue provides a comprehensive solution for handling notifications in Vue and Nuxt applications.