Add support for web-components

Hello @antfu,

unfortunately I can not use vue-demi in a micro frontend setup, where the container SPA provides the vue instance via window.Vue. The web components are using vue-demi but they crash since it tries to install the composition api on a non existing Vue instance.

[vue-composition-api] No vue dependency found. (in getRegisteredVueOrDefault)

is there any workaround to make this default install(Vue) call optional?

[lstoeferle]

Unfortunately my time is currently very limited, so I decided to add the solution here instead of creating an example project.

Things that have to be done in the container-ui project (the host Vue SPA for the web components):

// main.js
import Vue from 'vue';
import * as VueDemi from 'vue-demi';

// Make Vue and VueDemi global, so the web components can use it
window.Vue = Vue;
window.VueDemi = VueDemi;

Things that have to be done in the web-component project:

First move vue, @vue/composition-api and vue-demi to the devDependencies.

// vue.config.ts

module.exports = {
  chainWebpack: (config) => {
    if(process.env.NODE_ENV === 'production')
      // Exclude following dependencies from production build, keep for local serving
      config.externals({
        vue: 'Vue', // this should be externalized by default if the vue-cli build target is set to 'wc'
        'vue-demi': 'VueDemi'
      })
  } 
}

Also make sure all composition api related imports are imported from vue-demi in both projects.

This should prevent having multiple instances of the composition api in a micro-frontend setup with web-components

[lstoeferle]

Found and fixed the issue. I will create an example project on GitHub the next days and share the link here 😉