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.

The error occurs because you're targeting web components in a Vue 3 project, which is not yet fully supported. If you really want to create a Vue Web Component, recreate your project, selecting Vue 2. — tony19
– tony19, Commented Nov 18, 2020 at 13:22

DrMabuse · Accepted Answer · 2021-08-02 07:50:38Z

2

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

answered Aug 2, 2021 at 7:50

DrMabuse

1862 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaredcheeda · Accepted Answer · 2022-12-22 14:46:38Z

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.

SirTirstan · Accepted Answer · 2020-11-18 14:33:07Z

0

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

answered Nov 18, 2020 at 14:33

SirTirstan

232 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vue 3 Web Components do not build and instead throw error

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related