How to isolate the theme colors of concurrent Vue+Vuetify app instances?

13 views Asked by At

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?

0

There are 0 answers