Estructura de un Single File Component en Vue

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:14

Estructura de un Single File Component en Vue

Curso de Vue.js

Clase 3 de 34

Clase 3 / 34

Recursos

El Single File Component es la pieza central de Vue: un archivo .vue donde conviven HTML, CSS y JavaScript en un mismo lugar. Si vienes de la web tradicional, vas a sentirte en casa, porque Vue se apoya en los estándares que ya conoces y solo añade sintaxis extra para darte superpoderes como la reactividad.

Qué es un Single File Component en Vue

Un Single File Component, o archivo .vue, es una convención de Vue que te permite escribir toda la lógica, estructura y estilos de un componente en un solo archivo. Esto significa que dejas de saltar entre múltiples archivos para construir una pieza de interfaz.

Vue mantiene su base en HTML, CSS y JavaScript, así que un .vue no te obliga a aprender un lenguaje nuevo: te organiza el código que ya escribes.

¿Qué es un Single File Component? Es un archivo .vue que agrupa HTML, CSS y JavaScript de un mismo componente, usando las etiquetas template, style y script.

Cómo se estructura un archivo .vue

Dentro de cada archivo .vue vas a encontrar tres etiquetas que organizan el componente. Cada una cumple un rol específico y juntas dan vida a la pieza de interfaz.

template: contiene los nodos de HTML que se van a renderizar. No es una etiqueta de HTML nativa, pero es esencial en Vue.
script: aloja todo el JavaScript del componente, incluida la lógica de estado y comportamiento.
style: define los estilos CSS aplicados al componente.

Por ejemplo, para un contador de juego puedes crear GameCounter.vue dentro de la carpeta components y escribir un botón de menos, un span con el contador y un botón de más:

vue <template> <button>-</button> <span>0</span> <button>+</button> </template>

Por qué necesitas usar setup en script

La etiqueta script en Vue puede activarse con el atributo setup, y aquí está el detalle que marca la diferencia. Ese atributo le indica al archivo que vas a usar la Composition API, que es la forma moderna de trabajar con el ciclo de vida y la reactividad en Vue.

Sin setup, Vue no reconoce el archivo como un componente válido cuando intentas importarlo. Si lo quitas, el editor lanza un error y la aplicación deja de mostrar el componente en el navegador.

vue

¿Para qué sirve setup en Vue? Activa la Composition API dentro del archivo, permitiendo que el componente use reactividad, referencias y el ciclo de vida moderno de Vue.

Cómo importar un componente en App.vue

Crear el componente no basta: necesitas registrarlo en algún lugar de la aplicación. El entry point de toda app de Vue es App.vue, y desde ahí puedes importar tus componentes hijos.

La importación se hace con import dentro del bloque script setup. Vue te permite usar el alias @, que apunta a la carpeta src, lo que evita rutas relativas largas.

vue

Una vez importado, lo usas como una etiqueta más dentro del template. Si abres las dev tools de Vue en el navegador, verás el nodo App y debajo el nodo GameCounter, confirmando que el componente vive dentro del árbol de la aplicación.

Cómo correr la aplicación de Vue

Para ver el componente funcionando necesitas levantar el servidor de desarrollo desde la terminal. El comando estándar en proyectos de Vue creados con Vite es directo y rápido.

Abre la terminal en la raíz del proyecto.
Ejecuta npm run dev.
Abre el navegador en la URL que te indica la consola.

Después de eso, cualquier console.log que hayas escrito en el script aparece en la pestaña de info del explorador, lo que te ayuda a verificar que el componente se está ejecutando correctamente.

Por qué Vue se siente como HTML, CSS y JavaScript

La filosofía de Vue es no alejarte de los estándares de la web. Cada Single File Component es, en esencia, una hoja con tres secciones que ya dominas, más una capa de sintaxis extra que habilita reactividad, propiedades, referencias y manejo del ciclo de vida.

Esa cercanía con la web es la razón por la que escribir componentes en Vue resulta natural: trabajas con button, span, selectores CSS y sentencias de JavaScript, mientras Vue se encarga del resto.

¿Qué componente quieres construir primero con esta estructura? Cuéntame en los comentarios.

Jaqueline Torres

Hace un año

Hola comparto un resumen:

🧩 ¿Qué es un SFC en Vue?

SFC = Single File Component Es la forma en que Vue organiza los componentes: todo en un solo archivo .vue

Un SFC contiene:

<template> 👉 Aquí va el HTML <script> 👉 Aquí va la lógica JS <style> 👉 Aquí va el CSS

🧱 Estructura básica de un .vue:

<script setup> // Lógica del componente aquí </script>

<template> <h2>Hola, mundo</h2> </template>

<style> /* Estilos que solo afectan a este componente */ </style>

🔧 ¿Qué es <script setup> ?

Es una forma moderna de escribir la lógica de tu componente.

🚀 ¿Cómo importar usando @?

Vue + Vite ya viene con una configuración que hace que @ sea un alias de la carpeta /src Así puedes importar componentes sin usar rutas complicadas:

<script setup> import GameCounter from '@/components/GameCounter.vue' </script>

➡️ Esto es igual a escribir: import GameCounter from '../../components/GameCounter.vue' ¡Pero más limpio y sin errores de rutas! ✅

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Estructura de un Single File Component en Vue