Vue - as an embedded application?

Question

webpack

A vue application has been made, which is added to the site. The vue application uses the vuetify library, which overrides the styles of the site. How to solve this problem so that vuetify styles are used only within the vue application (without using an iframe)?

Answer 1

If you don't need support for IE11 and Safari - you can use web components and just include styles inside the component - they are encapsulated, otherwise you'll have to tinker.
I don't know how it will work with vuetify, but in a similar situation I used postcss-prefix-selector , just adding a short prefix class for all lib styles with it. Accordingly, you assign this class to the container with vueand, with luck, everything will work.)
Unfortunately, I also had to add a custom transform for the root ( body, :rootetc.) selectors, patch the lib itself in places and make sure that now the main styles of the site are not interrupted lib classes, but that's another story.)
PS For workpostcss-prefix-selectorwith vue-cliit is not necessary to manually twist loaderit, you can simply add it to .postcssrc.jsto plugins:

require('postcss-prefix-selector')({
    prefix: '.prefix'
}),

Answer 2

without using an iframe

Rewrite vuetify styles to be specific to selectors.