https://github.com/smastrom/notivue

🔔 Powerful toast notification system for Vue and Nuxt.
https://github.com/smastrom/notivue

alert alerts notification notifications nuxt nuxt3 toast toast-message toast-notifications vue vue-notification vue-notifications vue3 vuejs

Last synced: about 1 month ago
JSON representation

🔔 Powerful toast notification system for Vue and Nuxt.

• Host: GitHub
• URL: https://github.com/smastrom/notivue
• Owner: smastrom
• License: mit
• Created: 2023-04-02T20:54:03.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-02T12:04:09.000Z (2 months ago)
• Last Synced: 2024-09-24T15:50:57.425Z (about 2 months ago)
• Topics: alert, alerts, notification, notifications, nuxt, nuxt3, toast, toast-message, toast-notifications, vue, vue-notification, vue-notifications, vue3, vuejs
• Language: TypeScript
• Homepage: https://notivue.smastrom.io
• Size: 1.2 MB
• Stars: 678
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        







# 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_

**💫 Nuxt and Astro modules**  

_Built-in Nuxt and Astro ad-hoc modules_




## Installation

```shell

pnpm add notivue

# npm i notivue

# yarn add notivue

# bun i notivue

```




## Vite

> :bulb: See [↓ below](#nuxt) for **Nuxt**

**main.js/ts**

```ts

import { createApp } from 'vue'

import { createNotivue } from 'notivue'

import App from './App.vue'

import 'notivue/notification.css' // Only needed if using built-in 

import 'notivue/animations.css' // Only needed if using default animations

const notivue = createNotivue(/* Options */)

const app = createApp(App)

app.use(notivue)

app.mount('#app')

```

**App.vue**

```vue

import { Notivue, Notification, push } from 'notivue'

  Push

  

    

  

  

```

Headless, with custom components

```vue

import { Notivue, push } from 'notivue'

  Push

  

    

    


      


        {{ item.message }}

      


      

        

          

        

      

    

  


  

```




## Nuxt

**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

  }

})

```

**app.vue**

```vue

  Push

  

    

  

  

```




## Thanks

- [Ionic Team](https://ionic.io/) for the icons

- [Uktash Verna](https://github.com/n3r4zzurr0) for the animated spinner




## License

MIT