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.

[dekadentno]

Does someone have proof-of-concept repo or codesandbox for a workaround on this? @y-sanchez @ivansieder
Building components and publishing them in Vue 3 would be awesome.

[ivansieder]

@dekadentno we've worked around by just using custom elements (instead of actually web components) with the above little wrapper: #6033 (comment)

[melenaos]

I am using defineComponent for every component the library has and then I export all in the index.ts file

File: DateRangePicker.vue
export default defineComponent({
  name: 'DateRangePicker',
...
});

File: index.ts
import DateRangePicker from '@/components/DateRangePicker.vue';
export{
DateRangePicker
....
};

Except from the triviality of having to export the components in the index.ts file, the lib is working great.

Is there anything that could go wrong with this approach? It's my first lib and I am not sure if this is the best aproach.

[dekadentno]

Thank you for your quick replies @melenaos @ivansieder

[ranjanngc]

Please let me know when this will be supported

[ricvillagrana]

I totally need this feature, I am trying to export some components to let users embed them into their website by just importing them via script tag. If anyone has a workaround on how to achieve this, would love to know. Thanks in advance.

Previously achived with Vue2 but needed to upgrade to Vue3, and it broke everything.

[ivansieder]

@ricvillagrana if customElements is enough for you, we're currently using this workaround: #6033 (comment)

But please be aware that this implementation ist not WebComponent-compliant. It's just one part of the WebComponent spec (customElements)

[mrfy]

@ivansieder
Thank you for this workaround. If this is how we define a CustomElement, then how to build it, with the lib as --target flag? Ex. vue-cli-service build --target lib?

[ivansieder]

@mrfy yes, we're exporting the package as library. If you need/want to include Vue itself in the package (it gets externalized by default), you need to change that in your config, too.