Subtle problems with global state

[phbender]

When components are imported synchronously, a file using reactive or ref on the module level (outside of functions) may be read before the application is created. This leads to an error on the console:

Error: [vue-composition-api] No vue dependency found.

To work around the problem, the consuming component can be made an asynchronous one (with the Component: () => import('./Component') syntax.

Otherwise, only ref or reactive declared within a function body (which is called after the app has been loaded) seems to work.

In Vue3, I could not reproduce the same.

[pikax]

Can you provide a repo or code sandbox?

[jacekkarczmarczyk]

Also are you using the latest version? https://github.com/vuejs/composition-api/releases/tag/v1.0.0-beta.14

[zippaaa]

When components are imported synchronously, a file using reactive or ref on the module level (outside of functions) may be read before the application is created. This leads to an error on the console:

You can solve this problem like this
main.js

import Vue from 'vue';
// import VueCompositionAPI from '@vue/composition-api';
// Vue.use(VueCompositionAPI);
import './composition-api'; // <---
...

composition-api.js

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);

[phbender]

@alekseymvt Thanks, this solves it and at the same time adds no complexity to the code that would be redundant with Vue3.

[phbender]

I have added the snippet from @alekseymvt to the readme. I think that this is a difference to the behaviour in Vue3 and maybe it saves others from headache, too. See PR above.

[lewebsimple]

Just came here to say I've had this issue caused by upgrading to [email protected]
See vueuse/vue-demi#113