[vuex] already installed. Vue.use(Vuex) should be called only once.

[f1729]

Version

2.0.0

Reproduction link

https://jsfiddle.net/15ww4vog/8/

Steps to reproduce

1. Load jsfiddle page
2. Vue init method is executed.(With CDN, Just VUE and Jquery)
3. Vue init method makes a Ajax call to "https://api.myjson.com/bins/13xym3". and responds a HTML, JS injected to #dinamic-container div.
4. HTML, JS injected also includes a Vue instance.
5. creating conflicts "[vuex] already installed. Vue.use(Vuex) should be called only once."

What is expected?

1. Load page, instantiate VUE.
2. When a page is injected and includes a VUE instance. load with no conflicts.

What is actually happening?

1. Load page, instantiate VUE.
2. When page is injected and includes a VUE instance. a conflict is raised and show the "[vuex] already installed. Vue.use(Vuex) should be called only once." console error.

---

My parent view is loading Vue instance.
and I'm injecting a Child view that also contains its own Vue instance.

[jericopulvera]

I have the same problem

[ktsn]

It already is answered several days ago in the other issue (#729), and it looks like exactly same situation.
If you really think this is a different problem, please describe why you think so.

[f1729]

In this case, the external base files are just only JQuery and VueJS; Vuex arrives after ajax

[ktsn]

Vuex automatically call Vue.use(Vuex) if Vue is on window object. And you seems to call Vue.use(Vuex) in your own script all.js. So this happens.

Workaround is just removing Vue.use(Vuex) from your code or checking the existence of window.Vue to clarify you can call Vue.use(Vuex).

[LinusBorg]

Well, not really.The point is that window.Vueis a different Vue object. So he has to call Vue.use(Vuex) in his app.

In fact, in this instance, the "previously installed" check in vuex is falsely triggered.

Not sure how to improve this atm though.

[yepesasecas]

I have the same problem :( @LinusBorg @ktsn

[dlvergara]

I have troubles with the same window.Vue how can i change properly the install function?

[LinusBorg]

Are you all using two different versions of Vue on your website? Why?

[f1729]

In this case, I don't have to much control. we developed a checkout that can be injected in any merchants page, using the example I show you.

We ask the merchant to call our endpoint and include the html, js to their page.

I have control over the Vue instance that is called through Ajax.

There is a way I can create a scope/namespace? so both Vue instances can live in the same page?? or how can I prevent my instance to instantiate again and use the one already created.

[ktsn]

Oh, I understand.
Maybe, we can avoid this false positive by checking commonjs/amd specific variables in Vuex?

[LinusBorg]

Like if (window.Vue && window.Vue === Vue)?

[ktsn]

In this situation, we don't want Vuex to use global Vue since it's loaded as ESModule. So I think we can skip implicit registration if there is exports, module or define like:

if (
  typeof window !== 'undefined' && window.Vue
  && typeof exports !== 'object' && typeof module === 'undefined' // commonjs
  && typeof define !== 'function' && !define.amd // amd
) {
  install(window.Vue)
}

But not sure this is right direction. And I noticed this may break apps that load Vue in global but Vuex by any module system 😞

[f1729]

Can't install Vuex through the instance with the DIV ID?.
What if before the merchant app had VUEX?