# Notivue ### Powerful toast notification system for Vue and Nuxt [Live Demo](https://notivue.smastrom.io) - [Documentation](https://docs.notivue.smastrom.io) --- **Examples:** [Custom Components](https://stackblitz.com/edit/vitejs-vite-9jkh73?file=src%2Fcomponents%2FPage.vue) - [Nuxt](https://stackblitz.com/edit/nuxt-starter-fnhcmx?file=pages%2Findex.vue) - [Astro](https://stackblitz.com/edit/withastro-astro-qyesvk?file=src%2Fcomponents%2FVueComponent.vue)

## Features **🧬 Fully modular with zero dependencies** _Granularly include only the features you need_ **✅ Beautiful, ready-made notifications included** _Themes, icons, progress bar, and native RTL support_ **🧩 Headless API** _Use your own components while Notivue handles the rest_ **💊 Drop-in components to enhance notifications** _NotivueSwipe, NotivueKeyboard, all optional and customizable_ **🌀 Dynamic Notifications** _Update pending notifications with a breeze_ **🎢 Slick transitions and animations** _Customize animations with CSS classes_ **♿️ Fully accessible** _Built-in announcements, reduced-motion and keyboard support_
## Installation ```shell pnpm add notivue # npm i notivue # yarn add notivue # bun i notivue ```
## Usage **nuxt.config.ts** ```ts export default defineNuxtConfig({ modules: ['notivue/nuxt'], css: [ 'notivue/notification.css', // Only needed if using built-in 'notivue/animations.css' // Only needed if using default animations ], notivue: { // Options } }) ```

:bulb: After installing the module, any function, object and component mentioned in the [documentation](https://docs.notivue.smastrom.io) can be auto-imported except for types which must be imported manually if needed. ```ts import type { NotivueConfig, NotivueItem /*, ... */ } from 'notivue' ```

**app.vue** ```vue ```

Headless, with custom components

```vue ```

## Thanks - [Ionic Team](https://ionic.io/) for the icons - [Uktash Verna](https://github.com/n3r4zzurr0) for the animated spinner
## License MIT