How to scope internal Vue application css from rest of the website?

Question

I need to create a "plugin" that contains a user interface which will be displayed on many different vendor websites. This is a CMS agnostic plugin. I cannot use an iframe for SEO reasons. I need to isolate the plugin's css (and maybe js) from the rest of the website, and stop the rest of the website's css from getting to this plugin. How can I do this?

Update:

Ok, so I've asked a question that's a little too specific to my setup/tech. The question should have been: How do I isolate an html element from the rest of the document styles? This is answered here;

New Question: How do I scope Vue CSS so that it doesn't propagate up, but propagates to child components?

E.g I have the main Vue component which includes bootstrap.scss, i need that to apply to all child components, but I don't want it to leak into the main website. Adding scoped to style stops the leak upward, but I want it to apply to child classes as well.

I think you can use `` tags within the `.vue` file, that makes the style work for only what is enclosed in the `` tag of that file — Michael Oshosanya, Oct 16 '17 at 19:24
I also need to use bootstrap but I want it's own separate version. I also don't want the rest of the website's css to leak into the Vue app. Is this even possible? — Jeff, Oct 16 '17 at 19:42

score 6 · Accepted Answer · answered Oct 16 '17 at 20:45

6

Ok, I've figured it out.

Pretty simple really, combined with this answer to prevent parent -> child inheritance. I scoped all Vue css into #app { /*styles*/ } INCLUDING the bootstrap import. E.g.

<style type="text/scss" lang="scss">
    #app {
        @import '../node_modules/bootstrap/scss/bootstrap';

        // rest of vue global styles go here.
        // child components may use scoped
    }
</style>

Note: I am NOT using scoped attribute on the root vue component.

answered Oct 16 '17 at 20:45

Jeff

1,998
2
13
18

1

This will include *all* of bootstrap's css - do you need all of it? Is file size/ load time not a concern for you? – Linus Borg Oct 17 '17 at 04:37
No, it's not. These are small sites with not too much traffic. – Jeff Oct 17 '17 at 05:49
Thanks you for this, I have been using Less and this was not working, changing to scss works for me – Andrew Mar 31 '20 at 07:11

score 0 · Answer 2 · answered Oct 16 '17 at 20:12

I think this is what you’re looking for. In your .vue file you can add style tags to the template, then Vue will create Shadow DOM styles that only apply to your application. In the final product the styles are rendered via a data-v attribute to prevent class name conflicts.

https://vue-loader.vuejs.org/en/features/scoped-css.html

(Copied from my reddit answer) https://www.reddit.com/r/vuejs/comments/76ss46/how_to_isolate_a_vue_application_from_the_rest_of/?st=J8UMA1JQ&sh=c3ebf5b1

Hey, I am using that attribute currently, but I have a new issue. Please see my updated question. — Jeff, Oct 16 '17 at 20:15

How to scope internal Vue application css from rest of the website?

Update:

New Question: How do I scope Vue CSS so that it doesn't propagate up, but propagates to child components?

2 Answers2