Scoped Styling
Styling defined inside the<style> tag in a component, or inApp.vue, is actually available globally in all components.
To keep the styling limited locally to just the component, we can use thescope 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 componentsCompOne.vue andCompTwo.vue.
The CSS styling insideCompOne.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 inCompOne.vue is given thescoped attribute:
<template> <p>This p-tag belongs to 'CompOne.vue'</p></template><script></script><stylescoped> p { background-color: pink; width: 150px; }</style>
