Komponento stilizavimas Vue karkase

Komponentų stilizavimui komponento faile reikia parašyti tagą style:

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

Šiame tage galima rašyti CSS kodą, kuris bus taikomas tik komponento HTML kodui, ir nebus taikomas kitur. Tai specialiai padaryta patogumui.

Pažiūrėkime pavyzdį. Tarkime, kad turime keletą pastraipų:

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

Nudažykime jas raudona spalva:

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