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
– Nilson Jacques, Commented Jun 6, 2020 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
– Atlas-Pio, Commented Jun 6, 2020 at 20:26

Atlas-Pio · Accepted Answer · 2020-06-07 21:40:14Z

1

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.

answered Jun 7, 2020 at 21:40

Atlas-Pio

1,17314 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nilson Jacques · Accepted Answer · 2020-06-06 21:19:14Z

0

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
});

answered Jun 6, 2020 at 21:19

Nilson Jacques

4683 silver badges8 bronze badges

1 Comment

Atlas-Pio Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related