Vue-cli: Vue 3 Web Component target

[ivansieder]

What problem does this feature solve?

As a vue-cli and Vue 3 user I would like to be able to build and deploy a package as a web compomponent, so that it can be built and deployed in the same way as it's currently possible with vue-cli and Vue 2

What does the proposed API look like?

i.e. vue-cli-service build --target wc --name my-web-component-name --inline-vue

[y-sanchez]

Hi,

I have the same require, i would like to be able to build and deploy a package as a web compomponent with vue3.

Is there a date to support of the web component with vue3?

Thks

[ivansieder]

@y-sanchez we for our part didn't necessary require web components for now, so we've been ok with custom elements, too. So for now we've used custom elements, following is a (shortened) sample code that we use:

import { createApp, watch } from "vue";

import App from "./App.vue";

class CustomElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const options = typeof App === "function" ? App.options : App;
    const propsList: string[] = Array.isArray(options.props) ? options.props : Object.keys(options.props || {});

    const props: { [index: string]: string} = {};
    // Validate, if all props are present
    for (const prop of propsList) {
      const propValue = process.env.NODE_ENV === "development" ? process.env[`VUE_APP_${prop.toUpperCase()}`] : this.attributes.getNamedItem(prop)?.value;

      if (!propValue) {
        console.error(`Missing attribute ${prop}`);
        return;
      }

      props[prop] = propValue;
    }

    const app = createApp(App, props);

    const wrapper = document.createElement("div");
    app.mount(wrapper);

    this.appendChild(wrapper.children[0]);
  }
}

window.customElements.define("simedia-cloud-checkin", CustomElement);

[y-sanchez]

@ivansieder, Thank you for your sample.
I will try this.