Vue 3 Web Components do not build and instead throw error

Question

I created a new vue project with the vue cli and then adjusted main.js to support web-components:

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import HelloWorld from "./components/HelloWorld";

const CustomElement = wrap(Vue, HelloWorld);

window.customElements.define('my-custom-element', CustomElement);

When running vue-cli-service build --target wc I get the following error:

ERROR  Vue 3 support of the web component target is still under development.

I can not figure out why this error occurs and what i can do to fix it.

package.json:

...
"dependencies": {
   "@vue/web-component-wrapper": "^1.2.0",
   "core-js": "^3.6.5",
   "vue": "^3.0.2"
 },
 "devDependencies": {
   "@vue/cli-plugin-babel": "~4.5.0",
   "@vue/cli-plugin-eslint": "~4.5.0",
   "@vue/cli-service": "^4.5.4",
   "@vue/compiler-sfc": "^3.0.0",
   "babel-eslint": "^10.1.0",
   "eslint": "^6.7.2",
   "eslint-plugin-vue": "^7.0.0-0"
 },
...

I use @vue/cli version 4.5.9.

Answer 1

Hello there is a update in this. Topic see issue on github and comment on twitter looks like with vue 3.2.0 we have this feature back i created a small stackblitz but as you can see styles are not applied