Vue 3 Web Components do not build and instead throw error

user_11618264 0
Viewed 2677

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.

web-component vuejs3 vue.js
3 Answers

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

user_30358240

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".

user_116182640

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', TheFooWC);
}

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.

user_10582620
Related