vue-native-notification

Vue.js 3 plugin for native notifications with composition API hook.

Install

``
npm install --save vue3-native-notification
`

Usage

$3

`javascript
import { createApp } from 'vue'
import Vue3NativeNotification from 'vue3-native-notification'

const app = createApp()

app.use(VueNativeNotification, {
// Automatic permission request before
// showing notification (default: true)
requestOnNotify: true,
})
`

$3

`html



`

$3

You can manually request users permission with:

`javascript
// Global
app.notification.requestPermission().then(console.log) // Prints "granted", "denied" or "default"

// Component
//...
setup() {
const nativeNotification = useNativeNotification()

//...
nativeNotification.requestsPermission().then(console.log)
},
//...
`

$3

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

`javascript
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