Vue - Using plugin as prototype

Question

I'm using euvl/vue-notification for notifications on my application. Every time I want to notify the user I need to write the following code:

If inside a Vue component:

this.$notify({
    group: 'panel',
    type: 'success',
    duration: 5000,
    text: 'message'
})

Or if inside a .js file:

Vue.notify({
    group: 'panel',
    type: 'success',
    duration: 5000,
    text: `message`
})

I want to create a support file, similar to event bus and just call the following line to write a notification:

this.$notify('message')

This is what I tried until now but without success...

main.js

import Vue from 'vue'
import App from './App.vue'
import notifications from './support/notifications'

Vue.use(notifications)

new Vue({
  render: h => h(App)
}).$mount('#app')

notifications.js

import Vue from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

export default function install(Vue) {
    Object.defineProperty(Vue.prototype, '$notify', {
        get(message) {
            return Vue.notify({
                group: 'panel',
                type: 'success',
                duration: 5000,
                text: message
            })
        }
    })
}

lmarqs · Accepted Answer · 2019-02-19 17:39:14Z

1

I think you almost achieved what do you want, except of using Object.defineProperty. Try to return a function reference instead of Vue.notify's return on get method.

import Vue from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

export default function install(Vue) {
    Object.defineProperty(Vue, 'notification', {
        get() {
            return notification;
        }
    })

    Object.defineProperty(Vue.prototype, '$notification', {
        get() {
            return notification;
        }
    })
}

function notification(message) {
    Vue.notify({
        group: 'panel',
        type: 'success',
        duration: 5000,
        text: message
    })
}

edited Feb 19, 2019 at 17:39

answered Feb 19, 2019 at 15:55

lmarqs

1,47113 silver badges16 bronze badges

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

9 Comments

Caio Kawasaki Over a year ago

E quem diria que uma simples função causaria esse problema hehe

lmarqs Over a year ago

Pois é. E quem diria que meu inglês esta tão ruim assim que os brasileiros já reconhecem,. huehueuhe

Caio Kawasaki Over a year ago

There is just one problem, inside .js files when I call: Vue.notify('message', 'error') nothing happens

lmarqs Over a year ago

Probabily the Maximum call stack size exceeded error is caused by a circular call. I changed the custom plugin to '$notification' to avoid name conflicts. Could you test it?

Caio Kawasaki Over a year ago

Worked... One more thing for life, do not use the same names as the plugin uses...

|

Collectives™ on Stack Overflow

Vue - Using plugin as prototype

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related