My question is about running two Vue+Vuetify applications in the same web page and avoiding styling conflicts between them.
Consider a "main" Vue 3 web application running the homepage for a website. This "main" app embeds another "minor" Vue 3 web application in its HTML via a <script> tag. Both Vue 3 app use Vuetify 3 for styling, each with its own theme.
When the "main" app is loaded, its UI displays correctly. When, a fraction of a second later, the "minor" app is loaded, some of the colors of the "main" app change.
Specifically, the "main" app's primary color changes to the color #62ffee (purple) which is not part of either app's explicitly set theme colors. If I understand correctly, #62ffee is the implicit default primary color of the "minor" app.
I've been able to prevent this color disruption by disabling the "minor" app's Vuetify theme like so:
import { createVuetify } from "vuetify";
export default createVuetify({
theme: {
isDisabled: true,
},
customProperties: true,
});
My question is - Is there a way to enable theming in the "minor" app while keeping its theme colors from interfering with those of the "main" app?