Having locally scoped CSS in Vue when creating a component using Vue.extend({})

Question


var myComponent= Vue.extend({
    template:
    `
    <div class="container">
    </div>
    `
    ,
    props: [],
    components: {}
    ,
    data() {
        return {
        }
    },

    methods: {
    }
})

I have a component above that is created using the Vue.extend. It takes in data, methods and other things that are all locally scoped. I'm wondering if I can have CSS that is locally scoped to this component within the object passed to vue.extend()

I'm not using nodejs (using django) so I don't think I can use the recommended syntax within .vue elements (If I'm mistaken and I can use .vue files and the below syntax please let me know):

<style scoped>
/* local styles */
</style>

Fabio Martins · Accepted Answer · 2020-01-28 18:55:45Z

1

You may include this in your template string property:

template: `
    <div class="container">

        ...

        <style scoped> 
            /*your css*/
        </style>

    </div>
    `

This style tag will attach all the css to your parent container element as root, so it won't affect your entire document.

answered Jan 28, 2020 at 18:55

Fabio Martins

13113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fabio Martins Over a year ago

And by the way, this is not in the official documentation, if your classes aren't being properly built in production mode, you should check how to assing styles to your components using this.$style inside your code/vue instance

islingrad Over a year ago

this within template solution does not work when using non-node

Collectives™ on Stack Overflow

Having locally scoped CSS in Vue when creating a component using Vue.extend({})

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related