Vue Notification Center

A flexible and feature-rich notification system for Vue.js and Nuxt 3 applications. This library provides a simple way to manage and display notifications with various customisation options.

Version Information

• Vue.js: ^3.0.0 (peer dependency)
• Node.js: >=16.0.0
• PNPM: >=8.0.0

Features

• 🎯 Multiple notification types (default, info, success, warning, danger, error)
• 📍 Customisable notification positions (top/bottom - left/center/right)
• ⏱️ Configurable duration and timing
• 🎨 Customisable styling through CSS classes
• 🔄 Reactive state management
• 🎮 Event-driven architecture
• 📦 Lightweight and easy to integrate
• ⚡️ Nuxt 3 ready with auto-imports support

Installation

Vue 3

# Using npm
npm install @harianto/vue-notification-center

# Using yarn
yarn add @harianto/vue-notification-center

# Using pnpm
pnpm add @harianto/vue-notification-center

Nuxt 3

# Using npm
npm install @harianto/vue-notification-center

# Using yarn
yarn add @harianto/vue-notification-center

# Using pnpm
pnpm add @harianto/vue-notification-center

Importing Styles

To use the default styling for notifications, you need to import the CSS file:

Vue 3

// In your main.js or App.vue
import '@harianto/vue-notification-center/dist/style.css'

Nuxt 3

// In your nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@harianto/vue-notification-center/dist/style.css'
  ]
})

You can also customize the appearance of notifications by overriding the default CSS classes.

Usage

Vue 3 Setup

import { createApp } from 'vue'
import App from './App.vue'
import NotificationCenter from '@harianto/vue-notification-center'

const app = createApp(App)
app.use(NotificationCenter)
app.mount('#app')

Nuxt 3 Setup

Create a plugin file plugins/notification-center.client.ts:

import { defineNuxtPlugin } from '#app'
import NotificationCenter from '@harianto/vue-notification-center'

export default defineNuxtPlugin(nuxtApp => nuxtApp.vueApp.use(NotificationCenter))

Add the Component

<template>
  <NotificationCenter />
</template>

Show Notifications

Vue 3

// Using the global method
this.$notify({
  title: 'Success!',
  message: 'Operation completed successfully',
  type: 'success',
  position: 'topRight',
  timeDuration: 3000, // 3 seconds
  disableClose: false
})

// Using the provide/inject API
const { nc } = inject('nc')
nc.addNotification({
  title: 'Info',
  message: 'This is an info message',
  type: 'info'
})

Nuxt 3

// Using the global method (auto-imported)
const { $notify } = useNuxtApp()
$notify({
  title: 'Success!',
  message: 'Operation completed successfully',
  type: 'success'
})

// Using the provide/inject API
const { nc } = inject('nc')
nc.addNotification({
  title: 'Info',
  message: 'This is an info message',
  type: 'info'
})

Configuration Options

Notification Types

• default
• info
• success
• warning
• danger
• error

Positions

• topLeft
• topCenter
• topRight
• bottomLeft
• bottomCenter
• bottomRight

Default Notification Object

{
  uuid: string,          // Automatically generated
  title: string,         // Notification title
  message: string,       // Notification message
  elements: array,       // Custom elements
  type: string,          // Notification type
  position: string,      // Position
  show: boolean,         // Visibility state
  disableClose: boolean, // Prevent closing
  showCloseButton: boolean,
  timeStart: Date,       // Start time
  timeDuration: number,  // Duration in milliseconds
  elementClass: string,  // Custom CSS class
  data: object           // Additional data (e.g., { displayOnAlertCenterOnly: true })
}

Methods

Notification Center

• addNotification(notification): Add a new notification
• removeNotification(notification): Remove a specific notification
• removeNotificationByUuid(uuid): Remove notification by UUID
• removeNotifications(): Remove all notifications

Individual Notification

• toggleVisibility(): Toggle notification visibility
• hide(): Hide the notification
• destroy(): Remove the notification
• $on(event, callback): Subscribe to events
• $off(event, callback): Unsubscribe from events
• $emit(event, data): Emit events

Events

• destroy: Emitted when a notification is destroyed

Custom Elements

The notification center supports various types of custom elements, allowing you to create rich, interactive notifications. Here are examples of how to use custom elements:

1. Vue Options API Component

// Create a notification with a Vue Options API component
notificationCenter.methods.addNotification({
  elements: [
    {
      template: `Hello {{ text }} world`,
      data: () => ({
        text: 'My'
      })
    }
  ],
  position: 'topRight',
  timeDuration: null,
  elementClass: 'notification--notice'
})

2. HTML Template

// Create a notification with an HTML template
const createClonedFromTemplate = () => {
  const template = document.createElement('template')
  template.innerHTML = '<div>Hello <b>bold</b> world <strong>strong</strong></div>'
  return template.content.cloneNode(true)
}

notificationCenter.methods.addNotification({
  elements: [createClonedFromTemplate()],
  position: 'topRight',
  timeDuration: null
})

3. Custom DOM Elements

// Create a notification with custom DOM elements
const CustomDOMButton = buttonText => {
  const root = document.createElement('button')
  const textNode = document.createTextNode(buttonText)
  
  root.onclick = event => {
    root.innerHTML = 'Clicked'
    console.log('Button clicked: ' + buttonText)
    notification.destroy()
  }
  
  root.classList.add('btn', 'btn-primary')
  root.appendChild(textNode)
  return root
}

const notification = notificationCenter.methods.addNotification({
  elements: [CustomDOMButton('Click Me')],
  position: 'topRight',
  timeDuration: null
})

4. Vue Component with Proxy

// Create a notification with a Vue component using createProxy
import { createProxy } from '@harianto/vue-notification-center/lib/createProxy'

const proxy = createProxy({
  data: () => ({
    text: 'Proxy'
  }),
  template: `As the world {{text}} turns<button @click="onDestroy">Destroy</button>`,
  methods: {
    onDestroy() {
      if (typeof this.destroy === 'function') this.destroy()
    }
  }
})
proxy.destroy = () => {
  notification.destroy()
}

const notification = notificationCenter.methods.addNotification({
  elements: [proxy.$el],
  position: 'topRight',
  timeDuration: null
})

5. Combining Multiple Elements

You can combine multiple element types in a single notification:

const notification = notificationCenter.methods.addNotification({
  elements: [
    // Vue Options API component
    {
      template: `Hello {{ text }} world`,
      data: () => ({ text: 'My' })
    },
    // HTML template
    createClonedFromTemplate(),
    // Custom DOM button
    CustomDOMButton('CustomButton'),
    // Vue component with proxy
    proxy.$el
  ],
  position: 'topRight',
  timeDuration: null,
  elementClass: 'notification--notice'
})

Alert Center

The notification center includes an Alert Center component that can display notifications specifically marked for it. To make a notification appear only in the Alert Center, set the displayOnAlertCenterOnly property in the data object:

// Create a notification that only appears in the Alert Center
notificationCenter.methods.addNotification({
  title: 'Alert',
  message: 'This is an important alert',
  type: 'warning',
  data: {
    displayOnAlertCenterOnly: true
  }
})

To use the Alert Center, add the component to your template:

<template>
  <AlertCenter />
</template>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the CC-BY-4.0 License - see the LICENSE file for details.