Prevent vuetify from polluting global style scope

user_10659805 0
Viewed 1255

I am trying to essentially embed a Vue component into another one from a remote source (npm), without using a Vue Plugin. The components are mounting as expected, however, because the embedded component uses Vuetify, it's style is polluting the style of the "parent" application Here's some images that hopefully illustrate what i mean:

Note the primary colors of the root application before mounting the embedded component

Style of Root Application Before Mounting Embedded Component

Upon mounting of the Login (embedded) component:

Style of Root Application After Mounting Embedded Component

I tried the strategy mentioned here, using less in the embedded component to import the vuetify css at a block level, but it doesn't seem to be working for me.

I realize that, in the end, I could ultimately solve this by ensuring the embedded theme matches the root applications theme, but I'd rather not have to rely on that. If my component is being built with webpack, why am I unable to apply Vuetify's css to just that component? Any suggestions?

happy to include code if necessary

vuetify.js vue.js webpack css
2 Answers

To use with vue.js install postcss-parent-selector

npm i postcss-parent-selector -D

then create a postcss.config.js file in root and add following code

module.exports = {
  plugins: [
    require("postcss-parent-selector")({
      selector: ".mywrapperclass",
    }),
  ],
};

Then in public/index.html add a wrapper element around the app:

<div class="mywrapperclass">
  <div id="app"></div>
</div>

Some links:

user_119782410

I am currently having the same issue with my application. The possible solutions I've came up with are:

-Embedding the child Vue application via iframe and using a library like vuex-iframe-sync to pass props between Vuetify root app and the child app.

-Disabling Vuetify theme alltogether and perhaps customize components on my own:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const vuetify = new Vuetify({
  theme: { disable: true },
})

-Another option was using webpack config to run a PostCSS plugin and possibly add prefixes to Vuetify's global styles while bundling the app, but I couldn't figure out how.

Please let me know if you make any progress on this topic!

user_125622670
Related