Cant use vue plugins in modules about webpack HOT 12 CLOSED

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().

from webpack.

@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. 😃

from webpack.

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

from webpack.

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.

from webpack.

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.

from webpack.

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

from webpack.

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.

from webpack.

@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.

from webpack.

@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

from webpack.

@yyx990803 Thanks for explanation Evan!

from webpack.

@yyx990803 Thanks!

from webpack.

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

from webpack.