Stylování komponentu ve frameworku Vue

Pro stylování komponentů je v souboru komponentu třeba napsat tag style:

App.vue<script>
  
</script>
<template>
  
</template>
<style>
  
</style>

V tomto tagu lze psát CSS kód, který se bude aplikovat pouze na HTML kód komponentu a nebude aplikován nikde jinde. To je speciálně uděláno pro pohodlí.

Podívejme se na příklad. Předpokládejme, že máme nějaké odstavce:

App.vue<template>
  <p>
    1
  </p>
  <p>
    2
  </p>
</template>

Pojďme je obarvit na červeno:

App.vue<style>
  p {
    color: red;
  }
</style>