Theme configuration for multiple versions of Vuetify

[JoelTheConstantine]

I'm currently running a microfrontend application that uses different versions of Vue/Vuetify between components, in particular a page header component using Vuetify 2 and a newer application using Vuetify 3. The issue I'm running into is they both set the "vuetify-theme-stylesheet" style in the element, but the Vuetify 2 theming is overwriting the Vuetify 3 theming, wiping out the custom settings for the Vuetify 3 application

Is there a way to modify or compensate for this behavior? The collision is making it near impossible to custom style components in the Vuetify 3 application

[joel-wenzel]

I think these are what you are looking for:

• https://next.vuetifyjs.com/en/components/theme-providers/
• https://vuetifyjs.com/en/features/theme/#example

[KaelWD]

Best bet would probably be to set theme: { disable: true } (v2) theme: false (v3) in one or both, and create your own stylesheet with the styles you need.

[echjordan0]

In one application we're no longer installing the Vuetify plugin/configuring the theme but we're still seeing the base styles applied which are overriding the styles from the parent application that still initializes the Veutify plugin/adds theming. I would expect that the styles are not applied in the first application if we do not initialize Vuetify?