Štýlovanie komponentu vo frameworku Vue

Pre štýlovanie komponentov v súbore komponentu je potrebné napísať tag style:

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

V tomto tagu môžete písať CSS kód, pričom bude aplikovaný len na HTML kód komponentu, a nebude aplikovaný niekde vonku. Je to urobené špeciálne pre pohodlie.

Pozrime sa na príklad. Predpokladajme, že máme nejaké odseky:

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

Nafarbime ich na červenú:

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