[Vuejs]-Vue2 and composition api – cannot import store, error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

by

5👍

imports are automatically hoisted to the top of the file, so it actually precedes the Vue.use(VueCompositionApi) at runtime.

So these lines:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 
import App from './App.vue' 👈 hoisted

…become:

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

So the plugin doesn’t get installed before App.vue gets imported, leading to the error you observed.

Option 1: Move plugin installation to own file

You can move the installation of @vue/composition-api into its own file that could be imported before App.vue:

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

// main.js
import Vue from 'vue'
import './lib/composition-api'
import App from 'App.vue'

demo 1

Option 2: Use require() in App.vue

require the store in the component’s setup(), where the @vue/composition-api would’ve already been installed:

// App.vue
import { defineComponent, computed } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const store = require('@/store').default

    return {
      counter: computed(() => store.state.counter),
      increment: () => store.state.counter++,
    }
  },
})

demo 2

Option 3: Use import() in App.vue

Dynamically import the store with import(). This is especially needed in Vite, which does not have require().

// App.vue
import { defineComponent, computed, ref } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const store = ref()
    import('@/store').then(mod => store.value = mod.default)

    return {
      counter: computed(() => store.value?.state.counter),
      increment: () => store.value && store.value.state.counter++,
    }
  },
})

demo 3

👤tony19

Leave a comment