Scoped Styling
Styling defined inside the <style> tag in a component, or in App.vue, is actually available globally in all components.
To keep the styling limited locally to just the component, we can use the scope attribute on that component: <style scoped>
Global Styling
CSS written inside the <style> tag in any *.vue file works globally.
This means that if we for example set <p> tags to have pink background color inside the <style> tag in one *.vue file, this will affect <p> tags in all of the *.vue files in that project.
Example
In this application we have three *.vue files: App.vue, and two components CompOne.vue and CompTwo.vue.
The CSS styling inside CompOne.vue affects <p> tags in all three *.vue files:
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style>
p {
background-color: pink;
width: 150px;
}
</style>
Scoped Styling
To avoid that the styling in one component affects the styling of elements in other components we use the 'scoped' attribute on the <style> tag:
Example
The <style> tag in CompOne.vue is given the scoped attribute:
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style scoped>
p {
background-color: pink;
width: 150px;
}
</style>