Vue 3 Web Components do not build and instead throw error - vue.js

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

Answer 2

Vue-CLI does not currently support web components for Vue 3, but you can do it by hand. This worked for me.
src/MyLib.js
export { default as TheFoo } from '#/components/TheFoo.vue';
export { default as TheBar } from '#/components/TheBar.vue';
src/MyLib-WC.js
import { defineCustomElement } from 'vue';
import TheFoo from '#/components/TheFoo.vue';
import TheBar from '#/components/TheBar.vue';
const TheFooWC = defineCustomElement(TheFoo);
const TheBarWC = defineCustomElement(TheBar);
export {
TheFooWC,
TheBarWC
};
export function register () {
customElements.define('the-foo', TheFooWC);
customElements.define('the-bar', TheBarWC);
}
package.json
{
"scripts": {
"build": "npm run build-lib && npm run build-wc",
"build-lib": "vue-cli-service build --name=MyLib --modern --dest=dist/lib --target=lib src/MyLib.js",
"build-wc": "vue-cli-service build --name=MyLib --modern --dest=dist/wc --target=lib --inline-vue src/MyLib-WC.js"
}
}
Then npm run build.

Answer 3

As #tony19 pointed out the solution is to not use Vue3, as it cureently does not support web components.
The problem for me was the misleading error message, as "still under developement" did not signal to me, that web components were completly unsupported. I understood it, as a "not everything will work perfectly".