vuejs/vue-web-component-wrapper

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

wjq990112 opened this issue · 6 comments

wjq990112 commented

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 commented

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 commented

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!

  • 👍1
soann-dewasme commented

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 ?

  • 👍1
m-mohr commented

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

  • (Scoped) Slots have issues (see corresponding issues #46, #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 vuejs/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 vuejs/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 #96
  • Issues to load fonts #54
  • Props are not properly inherited from mixins / extended components - makes code hard to maintain #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.

  • 👍8
rajeevverma076 commented

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 commented

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.