how to use global function with plugin to show notification in vue.js?

Question

I'm trying to make a global function with help of plugin which it worked fine but i couldn't show my notification. I was doing my homework and i tried to not write everywhere those show notification methods, so I've searched and i found this solution and i managed to add plugin now i wan to use it in my component. here's the code :

AppNotifications.js

export default {
    failedNotification(title, data) {
        return this.$vs.notify({
            title:title,
            text:data,
            color:'danger',
            position:'bottom-center',
        });
    }
};

App.js

import Vue from 'vue'
import notifications from './Helpers/AppNotifications'

const plugin = {
    install () {
        Vue.notifications = notifications
        Vue.prototype.$notifications = notifications
    }
}

Vue.use(plugin)

const app = new Vue({
    vuetify,
    el: '#app',
    render: h => h(App),
    router
});

And in componenets when i use a button with @click="SomeMethod" i use plugin like this :

this.$notifications.failedNotification('Test','Just Failed, yay')

So function work but i get this error

Error in v-on handler: "TypeError: Cannot read property 'notify' of undefined"

Since I'm in learning process i wasn't familiar with this issue and I've tried to import vue and notification component itself but didn't worked.

Edit 01 : Notification is belong to Vuesax library and it's already imported in App.js and it's working fine when i use it in vue components but it's not working when i use it in AppNotification.js

What library are you using that provides the `$vs.notify` method? You've not shown any other Vue plugins being loaded in your App.js file. — Nilson Jacques, Jun 06 '20 at 10:24
@NilsonJacques i'm using Vuesax 3 my friend, i didn't know if there's more to show, if there's more just tell me to add. — Atlas-Pio, Jun 06 '20 at 20:26

score 1 · Accepted Answer · answered Jun 07 '20 at 21:40

So i found the solution for my problem and it fixed with sending this as parameter to function.

Vue Component :

//this was before the problem
this.$notifications.failedNotification('Test','Just Failed, yay')
//then i added this as parameter
this.$notifications.failedNotification(this,'Test','Just Failed, yay')

And in AppNotification.js

//Before changing
failedNotification(title, data) {
    return this.$vs.notify({
        title:title,
        text:data,
        color:'danger',
        position:'bottom-center',
    });
}
//Then i added self and replaced self with `this`
failedNotification(self,title, data) {
    return self.$vs.notify({
        title:title,
        text:data,
        color:'danger',
        position:'bottom-center',
    });
}

And it's worked.

score 0 · Answer 2 · answered Jun 06 '20 at 21:19

The error you're getting suggests that the notification library you're using isn't being loaded and if you posted the entire code of your App.js file then it looks like you're missing some code.

The file probably needs to look something like this:

import Vue from 'vue'
import Vuesax from 'vuesax'
import notifications from './Helpers/AppNotifications'
import 'vuesax/dist/vuesax.css' //Vuesax styles

const plugin = {
    install () {
        Vue.notifications = notifications
        Vue.prototype.$notifications = notifications
    }
}

Vue.use(Vuesax)
Vue.use(plugin)

const app = new Vue({
    vuetify, // <-- not sure where vuetify is coming from?
    el: '#app',
    render: h => h(App),
    router
});

hello sir. Vuesax is already imported in project, i didn't added to app.js because i tought the way i'm using it in AppNotification.js is wrong, but since my app.js got other libraries i just mentioned to problem. — Atlas-Pio, Jun 06 '20 at 22:00

how to use global function with plugin to show notification in vue.js?

2 Answers2