'How to integrate app-Level packages into Vue 3 Webcomponents?
Kontext
Vue 3 provides a way to create "Custom-Elements": https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue
The idea as far as I understand it, is to create Custom Elements, that can be used anywhere, as a Web component. Here (https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue) the developers specifically recommend using custom elements for component libraries.
Environment/Motivation
A client has a bigger UI Project that is based on other frameworks. He wants to switch to vue, but doesn't have the resources to completely rewrite/replace everything with a normal vue application. Therefore he wants to replace everything step by step by using webcomponents or more specifically, vue-components (with all the advantages of vue) that are compatible with his project.
Problem
The custom elements don't have global vue instance, because you don't mount a custom element, rather you mount a vue application.
However many libraries and packages like i18n, primevue, vuetify, (vuex), ... assume, that they are used in a global instance. At least their documentation requires adding them to the global app instance, otherwise, various features don't work.
Question
How can I use libraries that require a global vue instance to work, in the context of multiple custom elements?
Implicit Expectation
As a developer, I assumed, that major libraries like the ones I mentioned work for custom elements as well. I know that this requires each element to include a small "app instance", which I would guess could lead to performance issues.
For E.g. you create a Website with 100 custom elements with each having an app instance. If these performance issues I worry about are not essential, then I still could create a classic Webcomponent where I mount a vue app on it. (Following this comment, which I tested and it worked with some adjustments: https://github.com/vuejs/vue-web-component-wrapper/issues/93#issuecomment-909136116)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
