Vue Composition API from outside of Vue

Question

So, I've started using the Vue Composition API, and it's brilliant. I'm using it in a project that has Vue components, but also Vanilla JS. I'm building a notification system in Vue, as we are slowly moving everything that way.

I have the following code currently for adding a notification

export const useNotification = () => {
    const notifications              = ref([]);
    const visibleNotifications = computed(() => {
        return notifications.value.filter(notification => notification.visible === true).reverse();
    });

    const add = (notification: Notification) => {
        notifications.value.push(notification);
    };
};

I can get this adding perfectly from within Vue, but I want to also add a notification from the vanilla JS parts of the system. I've tried using useNotification().add() but I get the following error [vue-composition-api] must call Vue.use(plugin) before using any function. Basically, it wants me to use it inside Vue.

Any ideas on how I get this working?

I believe this is a shortcoming of using using vue-composition-api with vue2. If you were to use vue3, it should be fine. — Daniel
Hmm... Can't quite upgrade to Vue3 at the moment unfortunately! — LeeR
Following this SO question, whilst still using Vue2, it seems if I import vue into my notifications TS file, then that fixes. Gave a go, and it did! — LeeR

LeeR LeeR · Accepted Answer · 2020-08-21T00:08:34

Due to the shortcomings of using the vue-composition-api with vue2, and following the SO question here, I needed to add the following to type of my exported TS file

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

Vue.use(VueCompositionApi);

Vue Composition API from outside of Vue

1 Answers