VueJS — Intermedio

Dirigido a desarrolladores que ya dominan los fundamentos de Vue 3 y quieren dar el salto a la construcción de aplicaciones de complejidad media en entornos profesionales, este curso profundiza en los pilares que sostienen cualquier SPA robusta: arquitectura de componentes, gestión de estado centralizada, enrutamiento avanzado y consumo de APIs externas. A lo largo de 8 horas el participante aprenderá a diseñar sistemas de componentes reutilizables, a integrar Vue Router y Pinia, a adaptar con criterio las primitivas de reactividad de Vue y a conectar formularios con validación controlada, cerrando el ciclo con técnicas de depuración con Vue DevTools que permiten identificar y corregir errores de forma sistemática. Al finalizar, el participante será capaz de construir y mantener una SPA completamente funcional que consuma una API REST, gestione su estado de forma centralizada y aplique control de acceso mediante guardias de navegación.

1. Comparar las características de la Options API y la Composition API en un mismo caso de uso, eligiendo y justificando cuál resulta más adecuada según el contexto del proyecto.
2. Adaptar las primitivas de reactividad de Vue —ref, reactive, computed y watch— al tipo de dato y caso de uso concreto, argumentando la elección frente a las alternativas disponibles.
3. Diseñar un sistema de componentes reutilizables haciendo uso de props, emits y slots para resolver una funcionalidad de complejidad media, respetando el principio de responsabilidad única.
4. Diseñar y conectar formularios con validación controlada mediante v-model y lógica reactiva, sin depender exclusivamente de la validación HTML nativa.
5. Integrar Vue Router en una SPA configurando rutas dinámicas, rutas anidadas y guardias de navegación orientadas al control de acceso.
6. Integrar Pinia como gestor de estado centralizado, separando la lógica de UI y la lógica de negocio en stores diferenciados.
7. Integrar el consumo de una API REST externa con fetch o axios, gestionando en la interfaz los estados de carga, error y datos vacíos.
8. Depurar errores de reactividad y de flujo de datos entre componentes usando Vue DevTools y mensajes de consola hasta identificar la causa raíz y aplicar la corrección correspondiente.

Bloque 1 — Options API vs. Composition API El curso arranca situando al participante ante la decisión arquitectónica más habitual en proyectos Vue actuales: elegir entre la Options API y la Composition API. Se analizan ambos modelos sobre un mismo caso de uso, identificando cuándo la legibilidad de la Options API aporta valor y cuándo la flexibilidad y la capacidad de composición de la Composition API es determinante. Este análisis comparado proporciona el marco conceptual que sustenta el resto del curso.

Bloque 2 — Reactividad avanzada A continuación se profundiza en el sistema de reactividad de Vue 3, examinando las diferencias prácticas entre ref y reactive, el uso estratégico de computed para derivar estado sin efectos secundarios y la configuración de watch y watchEffect para responder a cambios de forma controlada. Se hace especial hincapié en justificar la primitiva elegida en función del tipo de dato y del ciclo de vida del dato en la aplicación.

Bloque 3 — Arquitectura de componentes y formularios reactivos El tercer bloque aborda el diseño de componentes reutilizables como unidad central de cualquier interfaz Vue. Se trabaja la comunicación entre componentes mediante props tipadas, eventos personalizados con emits y la proyección de contenido a través de slots simples y con nombre. El bloque culmina con la construcción de formularios con validación controlada usando v-model y lógica reactiva, prescindiendo de la validación HTML nativa para lograr un control completo sobre la experiencia de usuario.

Bloque 4 — Enrutamiento con Vue Router y gestión de estado con Pinia Este bloque integra las dos piezas de infraestructura imprescindibles en una SPA de producción. En la parte de enrutamiento se configuran rutas dinámicas con parámetros, rutas anidadas y guardias de navegación para proteger secciones de la aplicación. En la parte de estado se introduce Pinia, definiendo stores que separan con claridad la lógica de presentación de la lógica de negocio, y se muestra cómo acceder y mutar el estado desde cualquier componente de forma predecible.

Bloque 5 — Consumo de APIs REST y depuración El curso cierra integrando todos los conocimientos anteriores en un flujo completo de datos: llamadas a una API REST externa con fetch o axios, manejo explícito de los estados de carga, error y lista vacía en la interfaz, y almacenamiento de los datos remotos en un store de Pinia. El bloque final dedica tiempo a la depuración sistemática con Vue DevTools, mostrando cómo inspeccionar el árbol de componentes, el estado reactivo y los eventos emitidos para localizar y corregir errores de reactividad o de flujo de datos entre componentes.

• Node.js 18 LTS o superior con npm 9+ (o pnpm 8+).
• Vue CLI o, preferiblemente, Vite con la plantilla oficial de Vue 3 (npm create vue@latest).
• Vue Router 4.x y Pinia 2.x instalados en el proyecto de prácticas.
• Vue DevTools — extensión para Chrome o Firefox (versión estable más reciente).
• Editor de código con soporte para Vue 3: se recomienda VS Code con la extensión Volar (Vue - Official) deshabilitando Vetur si estuviese instalado.
• Acceso a internet para consumir la API pública de prácticas que se indicará al inicio del curso (sin necesidad de registro ni clave de API).
• Navegador moderno compatible con ES2020+ (Chrome 90+, Firefox 90+, Edge 90+).

Para aprovechar este curso el participante debe haber completado VVJS01 — VueJS Iniciación o demostrar un nivel equivalente. En concreto, se espera que sea capaz de crear componentes con la sintaxis de archivo único (.vue), usar directivas estructurales (v-if, v-for, v-bind, v-on), comprender el ciclo de vida básico de un componente y trabajar con el sistema de reactividad en su forma más elemental. Sin esa base, los bloques de reactividad avanzada y arquitectura de componentes resultarán de difícil seguimiento.