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

Can Stencil.js be utilized to link and include multiple Stencil projects within a single Vue.js Project?

Should we bundle everything into one script with webpack, considering Npm and Dev dependency or just dependencies?

Troubleshooting route issues with node.js and vue application hosted on Azure

Set styles to child elements of an external component using styled-components

Is there a way to switch the default text mode from plain to code, such as HTML?

What is the best way to position two out of the three link tags to the right side?

Angular 12 experiencing CSS alignment issues

What is the best way to address cookie issues while working on a full stack application that utilizes Vue and Express.js?

How can I align text to the bottom right and left corners at the same time?

Error: The virtual file system could not locate the file 'Roboto-Regular.ttf' within the DataTable component in vuejs

What is the best way to include multiple font styles for different tags?

Using Vue.js to conditionally render data in a v-for loop

"Troubleshooting a CSS Problem in the ADF

Jumping CSS dropdown menu glitch

Encountering a 404 Error in CKFinder 3 integration with Laravel 6 and Vuejs while accessing the File Browser

Unable to implement the `omega/theme.css` file within the angular.json configuration

Could my mental model be flawed? When a page is accessed using https, a relative css path will be invoked using the same protocol

Can child components forward specific events to their parent component?

I have been working on creating a horizontal menu, but encountered an issue where the nav tag is unable to accommodate all the ul lists within itself

creating a div element with a height that matches its content dimensions