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>
Run Example »
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>
Run Example »