En Vue, la forma de crear los componentes suele ser en un solo archivo (SFC - Single File Component), este método nos permite trabajar con una estructura cohesiva que agrupa plantilla, lógica y estilos en un mismo lugar. Esta forma de organizar el código facilita el desarrollo y mantenimiento de aplicaciones, especialmente cuando el proyecto crece.

Un componente de un solo archivo se compone principalmente de tres bloques: <template>, <script> y <style>. Cada uno cumple un rol específico, y su combinación define el comportamiento visual y funcional del componente. A continuación, revisamos su estructura con ejemplos y algunas consideraciones a tener en cuenta.

Ejemplo de estructura

<template>
  <div class="saludos">
    <p>Hola, {{ nombre }}!</p>
    <button @click="cambiarNombre">Cambiar nombre</button>
  </div>
</template>

<script>
export default {
  name: 'Saludo',
  data() {
    return {
      nombre: 'Vue'
    }
  },
  methods: {
    cambiarNombre() {
      this.nombre = 'Desarrollador'
    }
  }
}
</script>

<style scoped>
.saludos {
  font-family: Arial, sans-serif;
  margin: 20px;
}
</style>

Partes del componente:

• <template>: Aquí definimos el HTML que se renderiza. Es reactivo; cualquier cambio en los datos hará que se actualice la interfaz de forma automática.
• <script>: Encapsula la lógica. Aquí configuramos el componente con sus datos, métodos, propiedades y ciclos de vida.
• <style>: Permite definir estilos asociados al componente. Podemos usar scoped para limitar el alcance de los estilos al propio componente.

Este modelo evita separar artificialmente la lógica de la presentación. Al tener todo en un mismo archivo, podemos leer y editar un componente de forma más directa.

Consideraciones al trabajar con SFCs

Cuando escribimos componentes Vue de un solo archivo, conviene tener en cuenta ciertos puntos:

• Nombrar los componentes con intención clara (por ejemplo, ListaTareas.vue en lugar de Componente1.vue).
• Mantener cada componente enfocado en una única responsabilidad.
• Revisar que el uso de estilos scoped no genere colisiones no deseadas.

Conclusión

Los componentes de un solo archivo en Vue nos permiten mantener una estructura clara, reutilizable y fácil de mantener. Al tener en un solo lugar la vista, la lógica y los estilos, mejoramos la comprensión del código y reducimos la necesidad de saltar entre archivos. Esta organización se adapta bien a proyectos pequeños y grandes por igual, siempre que sigamos prácticas que promuevan la legibilidad y el aislamiento entre componentes.