vue-native-notification

Vue.js plugin for native notifications

Install

npm install --save vue-native-notification

Usage

Add plugin

import Vue from 'vue'
import VueNativeNotification from 'vue-native-notification'
 
Vue.use(VueNativeNotification, {
  // Automatic permission request before
  // showing notification (default: true)
  requestOnNotify: true
})

Show notification

<template>
  <button type="button" @click="notify">Show notification</button>
</template>
 
<script>
export default {
  methods: {
    notify () {
      // https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification#Parameters
      this.$notification.show('Hello World', {
        body: 'This is an example!'
      }, {})
    }
  }
}
</script> 
 
<style>
</style> 

Manual permission request

You can manually request users permission with:

// Global
Vue.notification.requestPermission()
  .then(console.log) // Prints "granted", "denied" or "default"
 
// Component
this.$notification.requestPermission()
  .then(console.log)

Events

https://developer.mozilla.org/en-US/docs/Web/API/Notification

We now supports all notifications events

onerror

https://developer.mozilla.org/en-US/docs/Web/API/Notification/onerror

Is an empty function. Nothing will be executed

onclick

https://developer.mozilla.org/en-US/docs/Web/API/Notification/onclick

When notification is clicked, we set the focus on the context browser and close the notification

onclose

https://developer.mozilla.org/en-US/docs/Web/API/Notification/onclose

Is an empty function. Nothing will be executed

onshow

https://developer.mozilla.org/en-US/docs/Web/API/Notification/onshow

Is an empty function. Nothing will be executed

Usage

const notification = {
  title: 'Your title',
  options: {
    body: 'This is an example!'
  },
  events: {
    onerror: function () {
        console.log('Custom error event was called');
    },
    onclick: function () {
        console.log('Custom click event was called');
    },
    onclose: function () {
        console.log('Custom close event was called');
    },
    onshow: function () {
        console.log('Custom show event was called');
    }
  }
}
this.$notification.show(notification.title, notification.options, notification.events)

License

MIT