Any Vuetify integration for example?

[MichelMan]

Hi @EranGrin,

First thanks a lot for your contribution to handle wrapping vue 3 component into web component. It's not so easy to find a lot resources on it that include vue plugins wrapping (Vue router, Pinia, etc.) even on vue 3 documentation...

I'm just wondering if you can show us an integration example with Vuetify plugin. Because I have some components in vue3 on my project who are developed with Vuetify UI looks. And I tried to figure out how to pass theses components in web component following recommandations in vue 3 documentation (here). Also, on Vuetify side, question about wrapping vue components made with Vuetify does not seem to be a priority atm for the community (here).

So that's why I desperately try to find a way to achieve my goal. Thanks in advance for your help!

[EranGrin]

Here you go: https://stackblitz.com/~/github.com/EranGrin/vuetify-web-component-wrapper Please let me know if everything works as expected.

[MichelMan]

@EranGrin thanks again for your help! It seems to work perfectly on my side with Vuetify plugin.

I just have one question about the <style> tags integration on the result page. It seems to be integrated twice: one at the root of the shadow dom and the other inside the v-app tags. Why do we need theses two inclusions for the same css styles?

Thanks in adance for your response!

[EranGrin]

@MichelMan this was indeed a great cutch, I'm not quite sure how I did not see this earlier, maybe it is related to the changes in the latest version of vue.

Bugfix is now available in the latest release, 1.6.4