Webpack: Cant use vue plugins in modules

[OEvgeny]

My main.js:

import Vue from 'vue'
import Resource from 'vue-resource'

Vue.use(Resource)

//now it is ok, I can use vue-resource here like this:
Vue.resource(...)

In another module:

import Vue from 'vue'

Vue.resource // undefined

I also tried to configure webpack providePlugin:

    new webpack.ProvidePlugin({
      Vue: 'vue',

But it not solve my problem.

[chrisvfritz]

This is working as intended. See the vue-resource docs for example usage.

[chrisvfritz]

The reason Vue.resource does not exist in the module is _because_ it's a module. You're importing a fresh copy of Vue, because that other copy only exists within main.js. Vue.use(Resource) in main.js adds vue-resource to the _context_ (this) of every component included from the App component.

[OEvgeny]

What if I need to use vue-resource directly from Vue because I perform some request out of my components? It is supported by vue-resource. I mean you can do it in a way I described abowe, but it's not working correctly with webpack because of modularity.
To work around this I tried to define Vue globally with providePlugin but is seems to not work too.

[chrisvfritz]

In the module that you want to use vue-resource in, is it still not working after Vue.use(Resource)?

[OEvgeny]

It looks like with Vue in globals it's not working too (see ProvidePlugin config for details). But when I call Vue.use in each module where I using resource directly it works.

[chrisvfritz]

@OEvgeny I wouldn't recommend adding Vue to globals anyway. Calling Vue.use within each module is the correct way to do this. Glad to hear that it's working for you. :smiley:

[OEvgeny]

@chrisvfritz I think it is not recommended, because I need to do it for each module where I use it. I moving my project into this boilprate, so before it was working well with webpack.

I also tried to export resource directly from main.js, and than import it in modules what depends on resource. It does not work too. Looks like mian module evaluates after another ones what need it because I found resource to be undefined.

[OEvgeny]

@yyx990803 sorry for mention you, but I think it can be important

I created a repo with my issue:

vue init OEvgeny/webpack test
cd test
npm i
npm run dev

Than follow console log in localhost:8080. My output:

There is no resource: undefined
Resource is defined and exported: function Resource () {...}
Api is not defined undefined

[yyx990803]

This is a module import order issue - because your main.js depends on other modules, those other modules are evaluated before main.js. In ES6, all import statements are hoisted, so even if you import other modules after Vue.use(VueResource), they still evaluate before that.

One work around is using require() instead of import which is not hoisted; another solution is to have a "bootstrap file" where you install all Vue plugins and export Vue again.

Finally, I think it's probably better to re-design vue-resource so that it can be imported and used individually without relying on the global Vue.use().

[OEvgeny]

@yyx990803 Thanks for explanation Evan!

[TheDeveloperTom]

@yyx990803 Thanks!

[emanuelmutschlechner]

@TheDeveloperTom you should definitely check out Evans post about retiring vue-resource https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4