Estilización de un componente en el framework Vue

Para estilizar componentes en el archivo de componente es necesario escribir la etiqueta style:

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

En esta etiqueta se podrá escribir código CSS, y este se aplicará únicamente al código HTML del componente, sin aplicarse en ningún otro lugar. Esto está hecho específicamente para mayor comodidad.

Veamos un ejemplo. Supongamos que tenemos algunos párrafos:

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

Vamos a colorearlos en rojo:

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