Desarrollo Frontend · FRO-120

Vue 3 desde cero

Reactividad, plantillas y componentes de archivo único hasta una aplicación con rutas y API.

Bajo demanda Intermedio 7 módulos · 34 clases

Formato asíncrono Desarrollo, Alumnado Vue, JavaScript

DESARROLLO

Lo que aprenderás

Declarar estado reactivo con ref y reactive y entender cuándo se actualiza la vista
Escribir plantillas con v-if, v-for, v-model y enlace de atributos y clases
Componer interfaces con componentes de archivo único, props y eventos emitidos
Aprovechar propiedades calculadas y watchers para derivar datos sin duplicar estado
Configurar rutas, parámetros de ruta y navegación protegida por guardas con Vue Router
Consumir una API REST con fetch gestionando carga, error y estado vacío
Construir y desplegar la aplicación con Vite y sus variables de entorno

Contenido del curso

7 módulos · 34 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Presentación y entorno 4 clases

Qué aporta Vue frente a manipular el DOM a mano
Crear el proyecto con Vite y recorrer su estructura
Herramientas de desarrollo de Vue en el navegador
Primer componente y recarga en caliente

Módulo 2 · Reactividad y plantillas 5 clases

ref, reactive y el porqué de .value
Interpolación y enlace de atributos con v-bind
Condicionales con v-if y v-show
Listas con v-for y la importancia de la clave
Eventos con v-on y modificadores

Módulo 3 · Componentes 5 clases

Componentes de archivo único: plantilla, script y estilo
Props tipadas y valores por defecto
Emitir eventos hacia el componente padre
Slots por defecto y con nombre
Ejercicio: tarjeta y lista reutilizables

Módulo 4 · Estado derivado y formularios 5 clases

Propiedades calculadas frente a métodos
watch y watchEffect: cuándo hace falta cada uno
v-model en campos de formulario
v-model en componentes propios
Validación y mensajes de error en la interfaz

Módulo 5 · Ciclo de vida y comunicación 5 clases

Hooks del ciclo de vida en la Composition API
Referencias a elementos del DOM con ref de plantilla
provide e inject para datos compartidos
Componentes asíncronos y carga diferida
Estilos con scope y variables CSS

Módulo 6 · Rutas y datos remotos 5 clases

Configurar Vue Router y las vistas principales
Rutas con parámetros y rutas anidadas
Guardas de navegación y acceso restringido
Peticiones a una API REST con fetch
Estados de carga, error y lista vacía

Módulo 7 · Proyecto de cierre 5 clases

Estructura de la aplicación de gestión
Alta, edición y borrado contra la API
Filtros, búsqueda y paginación
Construcción para producción y variables de entorno
Despliegue y repaso final

Requisitos

JavaScript moderno: funciones flecha, módulos, desestructuración, promesas y async
HTML y CSS a nivel práctico
Node.js instalado en local para usar Vite y npm

Descripción

Manipular el DOM a mano funciona hasta que la interfaz tiene varias vistas que comparten datos: entonces aparecen los estados incoherentes, los listeners duplicados y el código que nadie se atreve a tocar. Vue resuelve esa clase de problema con un modelo reactivo que se aprende en poco tiempo y sin abandonar el HTML que ya se conoce.

El curso construye una aplicación de gestión de tareas y clientes desde el primer componente hasta el despliegue. Se usa Vue 3 con la Composition API y componentes de archivo único, se organiza la navegación con Vue Router y se conecta con una API REST real, tratando explícitamente los estados de carga, de error y de lista vacía que los tutoriales suelen omitir.

Al terminar se puede entrar en un equipo que trabaje con Vue, leer su código sin fricción y asumir tareas de interfaz completas, desde el componente hasta la llamada al servidor. Es la base directa del curso de Vue avanzado, donde se abordan los composables reutilizables, el estado compartido con Pinia y la organización de aplicaciones grandes con TypeScript.

¿Para quién es este curso?

Desarrolladores web que vienen de JavaScript o jQuery y afrontan su primer marco de componentes
Alumnado de ciclos de Desarrollo de Aplicaciones Web que necesita un marco moderno para su proyecto final
Perfiles de backend que deben construir la interfaz de sus propios servicios