Vue Scoped Styling
Global styling is actually accessible in all components and is defined inside the <style> tag in a component or in App.vue.
We can utilize the scope attribute on that component to limit the styling to only that component locally: <style scoped>
Global Styling
Any *.vue file that contains CSS within the <style> tag is globally compatible.
This implies that all of the *.vue files in a project will have <p> tags if, for instance, we set the background color of <p> tags inside the <style> tag to pink in one *.vue file.
Example
Three *.vue files make up this application: App.vue, CompOne.vue, and CompTwo.vue, which are the two components.
The <p> tags in all three *.vue files are impacted by the CSS styling included in CompOne.vue:
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style>
p {
background-color: pink;
width: 150px;
}
</style>
Scoped Styling
We use the ‘scoped’ feature on the <style> tag to prevent stylistic changes in one component from affecting elements in other components:
Example
CompOne.vue assigns the scoped attribute to the <style> tag:
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script></script>
<style scoped>
p {
background-color: pink;
width: 150px;
}
</style>
