Desarrollo Frontend · FRO-121

Vue avanzado: Composition API y Pinia

Composables reutilizables, estado compartido con Pinia y organización de aplicaciones grandes.

Próximamente Avanzado 7 módulos · 33 clases

Formato asíncrono Desarrollo Vue, TypeScript

DESARROLLO

Lo que aprenderás

Extraer lógica repetida en composables con estado, limpieza y parámetros reactivos
Tipar props, emits y composables con TypeScript y las utilidades de tipos de Vue
Modelar el estado global en stores de Pinia con acciones, getters y persistencia
Controlar la reactividad fina con shallowRef, toRefs, readonly y customRef
Optimizar el renderizado con carga diferida de rutas, v-memo y componentes asíncronos
Probar componentes y composables con Vitest y Vue Test Utils
Estructurar una aplicación grande por dominios funcionales y dependencias explícitas

Contenido del curso

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

Módulo 1 · Punto de partida 4 clases

Diagnóstico de la aplicación de referencia
Configurar TypeScript, Vitest y análisis estático
Convenios de carpetas por dominio funcional
Criterios para decidir qué se extrae y qué no

Módulo 2 · Composition API a fondo 5 clases

setup, script setup y el orden de ejecución
Ciclo de vida y limpieza de efectos
toRefs, toRef y desestructuración sin perder reactividad
readonly y estado que no debe mutarse desde fuera
Reactividad fina con shallowRef y customRef

Módulo 3 · Composables 5 clases

Anatomía de un composable reutilizable
Parámetros reactivos y valores devueltos
Composable de peticiones con cancelación
Composables que dependen de otros composables
Ejercicio: extraer tres composables de la aplicación

Módulo 4 · TypeScript en Vue 4 clases

Tipar props y emits con defineProps y defineEmits
Genéricos en componentes y en composables
Tipos derivados de la API y validación en la frontera
Errores frecuentes del compilador y cómo leerlos

Módulo 5 · Pinia y estado compartido 5 clases

Definir un store y elegir su alcance
Acciones asíncronas y control de errores
Getters y estado derivado sin duplicar
Persistencia, hidratación y estado entre pestañas
Cuándo un composable basta y no hace falta store

Módulo 6 · Rendimiento y pruebas 5 clases

Carga diferida de rutas y división del paquete
v-memo, keep-alive y listas grandes
Analizar el paquete generado por Vite
Pruebas de componentes con Vue Test Utils
Pruebas de composables y de stores aislados

Módulo 7 · Proyecto de cierre 5 clases

Refactor completo del módulo de gestión
Fronteras entre dominios y dependencias permitidas
Cobertura de pruebas de la lógica extraída
Revisión de rendimiento antes y después
Guía de estilo del frontend para el equipo

Requisitos

Vue 3 en la práctica: componentes, props, eventos, Composition API y Vue Router
TypeScript a nivel de interfaces, genéricos básicos y tipado de funciones
Node.js y experiencia con proyectos gestionados por Vite

Descripción

Una aplicación Vue crece y aparecen síntomas conocidos: la misma llamada a la API repetida en cinco componentes, props que atraviesan cuatro niveles, un store que lo sabe todo y componentes que solo se pueden probar arrancando la aplicación entera. El problema ya no es el marco sino la arquitectura de la capa de cliente.

El curso parte de una aplicación real con esos defectos y la reorganiza paso a paso. Se extraen composables con su ciclo de vida y su limpieza, se define el estado compartido en stores de Pinia con fronteras claras, se tipa todo con TypeScript y se cubre con pruebas de Vitest. También se mide el efecto de cada decisión sobre el tamaño del paquete y sobre el tiempo de renderizado.

Lo que queda es un código donde la lógica de negocio vive separada de la presentación y se puede probar sin montar un navegador. Prepara para liderar la estructura de un frontend de equipo, para migraciones desde Options API y para trabajar con Nuxt o con renderizado en servidor.

¿Para quién es este curso?

Desarrolladores frontend que mantienen una aplicación Vue que ha crecido más de lo previsto
Personas responsables de definir la arquitectura de cliente en un equipo de producto
Perfiles que migran una base de código de Options API a Composition API con TypeScript