Vue.js plugin for native notifications
npm install --save vue-native-notification
import Vue from 'vue'
import VueNativeNotification from 'vue-native-notification'
Vue.use(VueNativeNotification, {
// Automatic permission request before
// showing notification (default: true)
requestOnNotify: true
})<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>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)https://developer.mozilla.org/en-US/docs/Web/API/Notification
We now supports all notifications events
https://developer.mozilla.org/en-US/docs/Web/API/Notification/onerror
Is an empty function. Nothing will be executed
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
https://developer.mozilla.org/en-US/docs/Web/API/Notification/onclose
Is an empty function. Nothing will be executed
https://developer.mozilla.org/en-US/docs/Web/API/Notification/onshow
Is an empty function. Nothing will be executed
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent