[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

[szvest]

I am getting this error after updading apollo-composable to the latest version.

[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

I am using VueCompositionAPI as a Nuxt plugin.

import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";

Vue.use(VueCompositionApi);

To Reproduce
1 - Upgrade from @vue/apollo-composable v 4.0.0-alpha.8 to v 4.0.0-alpha.10.
2 - Run npm run dev
3 - Go the browser

Versions
nuxt: 2.13.3
@nuxtjs/apollo: 4.0.1-rc.1
@vue/composition-api: v1.0.0-beta.8

[IRlyDontKnow]

I've got same issue, but with the quasar framework.

[dietergoetelen]

@szvest I've had a similar issue with nuxt, what I did was the following:

1. Create a folder /composition with the following content
   index.ts

import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";

Vue.use(VueCompositionApi);

export * from "@vue/composition-api"

2. Change composition references from "@vue/composition-api" to "@/composition"

[MechJosh0]

Possible duplicate of #1029

[szvest]

Thanks, @dietergoetelen. These are the steps I followed:

1. Upgrade from @vue/apollo-composable v 4.0.0-alpha.8 to v 4.0.0-alpha.10.

2. Remove the composition-api plugin from nuxt.config

plugins: [ 
// { src: "@/plugins/composition-api" },
]

3. Create /composition folder and transfer composition-api.js (and renaming it to index.ts) from the plugins folder to the new folder with the following export added.

export * from "@vue/composition-api"

4. Find and replace all occurrences of from "@vue/composition-api" to from "@/composition"

Same issue. Nothing fixed.

[DarkLite1]

I've got same issue, but with the quasar framework.

@IRlyDontKnow Maybe my answer on StackOverflow might help you. Or simply add a boot file to Quasar with this content:

// ./boot/VueCompositionApi.ts
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

Which you then load in quasar.conf.js like so:

// ./quasar.conf.js
const { configure } = require('quasar/wrappers')

module.exports = configure(function (ctx) {
  return {
    supportTS: {
      tsCheckerConfig: { eslint: true },
    },
    // order is important
    boot: ['i18n', 'VueCompositionApi', 'auth', 'apollo', 'router'],

[Akryum]

See vueuse/vue-demi#7