Unable to use reactive outside of setup
shadskii opened this issue · comments
Calling reactive outside of a component's setup function or composable results in the following error message:
Uncaught Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
see replit
Example Code
<template>
<div>
{{store}}
</div>
</template>
<script>
import {defineComponent,reactive} from '@vue/composition-api';
const store = reactive({a: '1'});
export default defineComponent({
setup(){
return{
store
}
}
})
</script>
Expected behavior
reactive should not throw an error and should behave as Vue.observable when used outside of setup or a composable and return a reactive object.
Creating reactive object stores outside of components in Vue 3 using reactive is a legitimate pattern (see) and supporting it in the @vue/composition-api will help ease the upgrade to Vue 3.
If this is not possible to implement, this limitation should be documented in the readme.
The error is pretty self explanatory: you are not calling Vue.use(VueCompositionAPI) before calling reactive(). You have to ensure it's called in the right order. E.g:
// a.js
export default reactive({})// plugins
Vue.use(VueCompositionAPI)// main.js
import state from './a.js'
import './plugins' // too late!Instead, do
// main.js
import './plugins'
import state from './a.js'Remember to use the forum or the Discord chat to ask questions!