Komponentin tyylittely Vue-frameworkissa

Komponenttien tyylittelyyn tulee komponenttitiedostoon kirjoittaa style-tag:

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

Tähän tagiin voidaan kirjoittaa CSS koodia, ja se sovelletaan vain komponentin HTML-koodiin, eikä sitä sovelleta muualla. Tämä on tehty erikseen käytettävyyden vuoksi.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on joitain kappaleita:

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

Värjätään ne punaiseksi:

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