[Question] Is this a good idea? I mean use Vue to build Web Components.

[wjq990112]

This build way will inevitably import the runtime of Vue, which will not only lose the characteristics of Web Components separated from the framework, but also lose the advantages of its size. Is this really a good idea?

To this idea, I put forward some questions of my own, hoping to be answered.

Thx!

[riovir]

There is a use case for micro-frontend style development.

We use a simple browser-native shell (skeleton app) to load micro-apps (pages) that register to serve some URLs. Those pages are web components (big ones). Inside many of them, we got Vue applications using this webcomponent wrapper. This style allows new pages to be made with any technology that can be put inside webcomponents, not just Vue.js.

[m-mohr]

I think Web Components with Vue are theoretically a good idea, but the implementation right now has so many bugs, that I would not recommend it right now!

[soann-dewasme]

I think Web Components with Vue are theoretically a good idea, but the implementation right now has so many bugs, that I would not recommend it right now!

I'm interested on feedback and details about bugs and experiments. I suppose you talk about vue2 since vue3 wrapper is not yet available ?

[m-mohr]

@soann-dewasme Yes, indeed, I'm on Vue 2. Issues I ran into:

• (Scoped) Slots have issues (see corresponding issues Native Slot - please explain how to use #46, Scoped Slot Alternatives? #8) - most annoying issue right now
• I've issues with recursive components. Although they work in non-web-components with dynamic async imports, I need to implement workarounds for that, see Web Components: Recursive use of components not supported vue-cli#6225
• No easy way to pass arrays or objects to the components through HTML. I've implemented a workaround where I'm passing JSON via HTML script tags, see https://github.com/Open-EO/openeo-vue-components#html
• You can't define what files are common between components. For example, I have a utils.js, which is included in every web component and each chunk contains it. Instead, it would be better to include them once in the "initial" chunk which also includes Vue for example. See also issue Web Components: Common parts in entry file vue-cli#6263
• Vue Devtools is not available for web components, which makes them hard to debug (especially as they often work quite a bit different than "normal" components). See Vue Devtools doesn't work with this wrapper (workaround inside) #96
• Issues to load fonts How to load a font with Vue Web Component Wrapper #54
• Props are not properly inherited from mixins / extended components - makes code hard to maintain Props are not properly inherited from mixins / extended components #30

All these bugs cost me weeks of dev time, just to work around issues in this implementation of web components. Thus, I regret moving to web components right now and would not recommend it.

[rajeevverma076]

I think Web Components with Vue are theoretically a good idea, but the implementation right now has so many bugs, that I would not recommend it right now!

So many bugs if you used a third-party plugin unable to get all dependencies and wouldn't be work as expected.

[rajeevverma076]

So many bugs if you used a third-party plugin unable to get all dependencies and wouldn't be work as expected.

So many bugs if you used a third-party plugin unable to get all dependencies and wouldn't work as expected.