Use Vue.js plugin in Vuex Store module

Question

I am trying to use a Vue.js plugin inside of a Vuex Store module.

In a component, I am able to call it like this: this.$plugin(). However, in a module, this is not set. I thought Vue.$plugin() would work since I initialize the plugin with Vue.use(plugin) and Vue being a global variable, but it doesn't.

How do I reference the plugin from a module?

Here is the plugin: github.com/euvl/vue-notification Trying to use this.$notify(). But this should apply to all plugins with instance methods. — Fredrik
– Fredrik, Commented Nov 22, 2017 at 16:54
Using this is definitely not going to work, Vuex is not an instance of Vue. Looking over the plugin it doesn't look like it gives you an easy way to do what you want. — Bert
– Bert, Commented Nov 22, 2017 at 16:59
Here's a hacky way you might do this. But I think you would probably want to create a notifications array in Vuex state, and populate it when a notification is necessary, then in Vue watch the notifications queue and pop/display them as needed. — Bert
– Bert, Commented Nov 22, 2017 at 17:54
Thats pretty much how I ended up doing. window._app = new Vue({}); and _app.$notify({}); Thanks for the help though! — Fredrik
– Fredrik, Commented Nov 22, 2017 at 18:01

parker_codes · Accepted Answer · 2020-07-30 21:02:45Z

3

The cleanest way I found is to import Vue in the store/module and then use the plugin via the Vue prototype.

import Vue from 'vue';

// .. in some logic
Vue.prototype.$dialog.alert('Something went wrong');

answered Jul 30, 2020 at 21:02

parker_codes

3,4151 gold badge21 silver badges27 bronze badges

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

2 Comments

massimoi Over a year ago

This is working, thanks. I was just wondering: don't we create a sort of "double import": vue imports the module and the module imports vue?

parker_codes Over a year ago

@massimoi, I don't believe so. Circular imports would cause many issues, but it is common in Vue to import it in order to register plugins or use it's extended features.

Fredrik · Accepted Answer · 2021-08-02 16:45:08Z

2

This question was answered by Bert in the example provided here: https://codesandbox.io/s/jp4xmzl0xy

    import Vue from 'vue'
    import App from './App'
    import Notifications from 'vue-notification'
    import Vuex from "vuex"
    Vue.use(Notifications)
    Vue.use(Vuex)
    
    let notifier = new Vue()
    
    
    const store = new Vuex.Store({
      state:{},
      actions:{
        notify(context, payload){
          notifier.$notify(payload)
        }
      }
    })
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      template: '<App/>',
      components: { App }
    })

edited Aug 2, 2021 at 16:45

answered Nov 22, 2017 at 19:09

Fredrik

3,3508 gold badges37 silver badges72 bronze badges

Comments

hitautodestruct · Accepted Answer · 2021-04-25 08:34:29Z

1

Pass in the vue instance as an argument

Another option is to pass the vue instance as an argument for your action.

// Vue component
{
  methods: {
    const vm = this
    this.$store.dispatch('someaction', { vm })
  }
}

// Store action
{
  someaction (context, { vm }) {
    vm.$dialog.alert('Something went wrong')
  }
}

answered Apr 25, 2021 at 8:34

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

3 Comments

rgin Over a year ago

This seems like the best way to go. Are there caveats to this method like building for production or anything?

hitautodestruct Over a year ago

@rgin There is no caveat besides the fact that you are passing in to vuex an instance of vue which is not ideal since it makes your code harder to maintain. Building this for production will work.

rgin Over a year ago

Thanks. Yeah, ended up having to refactor the code because of this.

Daniel Storey · Accepted Answer · 2022-02-22 16:21:38Z

There's a couple of other ways I've found. Honestly not sure which is the best though. I really don't like importing Vue and calling prototype methods. Seems like a complete antipattern and particularly difficult when it comes to testing using localVue as the actions have been coupled to global Vue.

I'm pretty sure you're not supposed to do this but you can access the vue instance of the store from within an action using this._vm.$notify
You can create a store plugin:

const notifyStore = (store) => {
  store.$notify = store._vm.$notify
}

Create notify as a standalone module

import Vue from 'vue'

let notifier = new Vue()

export default notifier

A combination of the two

import notifier from './notifier'

const notifyStorePlugin = (store) => {
  store.$notify = notifier.$notify
}

I'm not saying this is the definitive answer on this. I'm also very open to feedback and other suggestions.

Collectives™ on Stack Overflow

Use Vue.js plugin in Vuex Store module

4 Answers 4

2 Comments

Comments

Pass in the vue instance as an argument

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Pass in the vue instance as an argument

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related