Stop vuetify from cluttering the global style scope

Question

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can be seen below:

Before mounting the embedded component, notice the primary colors of the root application:

https://i.stack.imgur.com/Op9Uz.png

After mounting the Login (embedded) component:

https://i.stack.imgur.com/N5vsa.png

Attempted a strategy mentioned here, using less in the embedded component to import Vuetify css at a block level, but it did not work.

Realizing that making sure the embedded theme matches the root application's theme could solve the issue, however, I prefer not to rely on that solution. If my component is built with webpack, why am I unable to apply Vuetify's css just to that specific component? Any suggestions?

I am willing to provide code if needed

css vue.js webpack vuetify.js

Answer 1

Answer №1

If you're working with vue.js, make sure to install postcss-parent-selector

npm i postcss-parent-selector -D

Next, create a postcss.config.js file in your root directory and include the following code:

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

After that, add a wrapper element around your app in public/index.html:

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

Here are some helpful links for reference:

Answer 2

If you're working with vue.js, make sure to install postcss-parent-selector

npm i postcss-parent-selector -D

Next, create a postcss.config.js file in your root directory and include the following code:

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

After that, add a wrapper element around your app in public/index.html:

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

Here are some helpful links for reference:

Answer 3

Answer №2

I am currently experiencing a similar issue with my application. I have considered a few potential solutions:

-One option is to embed the child Vue application using an iframe and utilize a library like vuex-iframe-sync to share props between the Vuetify root app and the child app.

-Another approach could be to completely disable the Vuetify theme and potentially customize components independently:

// src/plugins/vuetify.js

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

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

-I also explored the idea of using webpack configuration to implement a PostCSS plugin and potentially apply prefixes to Vuetify's global styles during the app bundling process, but I encountered challenges in implementing this.

If you make any headway on this matter, please update me!

Answer 4

I am currently experiencing a similar issue with my application. I have considered a few potential solutions:

-One option is to embed the child Vue application using an iframe and utilize a library like vuex-iframe-sync to share props between the Vuetify root app and the child app.

-Another approach could be to completely disable the Vuetify theme and potentially customize components independently:

// src/plugins/vuetify.js

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

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

-I also explored the idea of using webpack configuration to implement a PostCSS plugin and potentially apply prefixes to Vuetify's global styles during the app bundling process, but I encountered challenges in implementing this.

If you make any headway on this matter, please update me!

Stop vuetify from cluttering the global style scope

Answer №1

Answer №2

Similar questions

Vue framework fails to recognize the spread operator when used with WebPack

Is your Facebook send button appearing strangely? Find out how to fix it here!

Adding a certain number of days to a date within an existing ng-module in AngularJS

Decipher and handle the ampersand symbol in a GET query with Django and Vue

VueJS not updating data variable as expected upon click event triggering function

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

Is there a way to enable scrolling in the background when a modal is open?

The CSS for a VueJS compiled app seems to fail to apply properly unless manually copied and pasted into the browser's style editor

The appearance and functionality of the app undergo a noticeable transformation after being bundled with Webpack

Guide on incorporating `Animate.css` into an Angular application

How to keep the button on the page while using router-link in Vue 2?

Combining arrays of objects in VueJS

Tips for ensuring a div stays centered while resizing the window

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Leverage Bootstrap to apply margins to a container

Is there a way to make the text on my Bootstrap carousel come alive with animation effects?

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

With Vue 3 Pinia, values fetched from an API within a Pinia store cannot be statically assigned; they will always be reactive

Ways to avoid automatic error correction when running npm lint?

Adjust the hue of the SVG sprite