Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function

This problem was fixed by a friend on the Vue.js forum. For anyone else who is running into this issue I'll post his answer here. In short you need to create a separate file that will install the composition API plugin and call that file within the router/index.ts file to instantiate the plugin.

It’s because of the composition API not being inside Vue itself. With the release of Vue 3 this will be fixed.

You need to Vue.use(CompositionApi) before trying to use anything that belongs to @vue/composition-api.

In your main.js or index.js, the app entry point, install it first:

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

This works. But I assume your file doesn’t look like this and it looks more like the next one:

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
import { isAuthenticated } from '@/store/auth'

Vue.use(VueCompositionApi)

This will blow up everything again because the line that installs the composition API (Vue.use(VueCompositionApi)) is after a line that imports something that uses it (import { unauthenticated } from '@/store/auth')

In the meantime, until Vue 3.0 reaches its release, you can create a file that simply installs the plugin:

// installCompositionApi.js

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

And then in your entry point:

// main.js
import './installCompositionApi.js'
import Vue from 'vue'
import { isAuthenticated } from '@/store/auth'

if (isAuthenticated.value) {
// ...
} else {
// ...
}

This will work.