Optional build as custom element

[lstoeferle]

Hi there,

I'm using the opportunity for a feature request, which I couldn't implement on my own 😞. Since VueCli is based on Webpack there is no option to build a Vue2 custom element using Vite (VueCli docs).

During my little research I stumbled opon the @vue/web-component-wrapper library, which probably will do most of the job.

Unfortunately my knowledge about creating Vite plugins is quite low, but maybe someone of you already have a nice idea how to integrate such a feature into this plugin.

[underfin]

You can use the code form https://github.com/vuejs/vue-web-component-wrapper as a entry, it should work for you.

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'

const Component = {
  // any component options
}

const CustomElement = wrap(Vue, Component)

window.customElements.define('my-element', CustomElement)

[lstoeferle]

Hi @underfin, I've created an example project lstoeferle/vite-vue2-custom-element. So far almost everything is working, except style loading. Maybe someone has an idea :)

[depressedX]

Hi @underfin, I've created an example project lstoeferle/vite-vue2-custom-element. So far almost everything is working, except style loading. Maybe someone has an idea :)

Hi, my friend @lstoeferle, figured out some solutions? I met the same ShadowDom style problem as you said. While I found the forked plugin @web-widget/vite-plugin-vue2 and it may solve this. But I'm not sure it's reliable enough for production. So you found better way?

[lstoeferle]

Hey @depressedX, thanks for sharing the fork. Unfortunately I did not find a better way yet. @underfin what do you think about adding such additional feature?