Description

Curso 2 meses

FRONTEND WEB CON VUE.JS

Desarrolla e implementa aplicaciones web SPA, desde el diseño hasta su despliegue en producción

Inicio 1 de octubre 2025

Organiza

Online en vivo

2 meses

Martes y Jueves 8:00 pm a 9:30 pm

56 horas académicas

GRATIS – MASTER CLASS ONLINE

Esta especialización incluye

4 módulos de estudio (2 semanas de duración cada módulo).
16 clases online en vivo (1 hora con 30 minutos cada clase).
Archivos complementarios de estudio.
Proyecto web que implementa comunicación Api/Real time.
Asesoría del profesor en clase.
Aula virtual con acceso a la grabación de las clases y archivos de estudio.
Doble certificación por la Universidad San Martin de Porres y Andes – Centro de Negocios Tecnológicos.

GRATIS
CLASE INTRODUCTORIA

REGÍSTRATE

Acerca del curso

Aprenderás a construir aplicaciones web dinámicas, escalables y de alto rendimiento utilizando Vue 3 y TypeScript. Desde los fundamentos hasta técnicas avanzadas, exploraremos el ecosistema de Vue, incluyendo Componentes, Vue Router, Pinia, Composition API y la integración con APIs REST.
Aprenderás con un enfoque práctico desarrollando una aplicación web SPA con la asesoría del profesor en clase
Conocimiento básico de JavaScript o algún otro lenguaje de programación.
Organiza Universidad de San Martín de Porres y Andes – Centro de Negocios Tecnológicos.

Dirigido a

Profesionales junior en desarrollo web que deseen especializarse en full stack
Desarrolladores frontend o backend que quieran ampliar sus conocimientos
Estudiantes y profesionales de ingeniería de sistemas, software o carreras afines
Entusiastas de la tecnología interesados en la creación de aplicaciones web escalables

Objetivos

Al finalizar el curso estarás capacitado para:

Dominar los fundamentos y estructura de Vue.js para construir aplicaciones interactivas
Implementar gestión de estado y navegación eficiente en aplicaciones Vue.js
Consumir APIs de manera segura y gestionar autenticación en el frontend
Optimizar y desplegar aplicaciones Vue.js en entornos productivos

Plan de estudio

Módulo 1: Introducción a Vue.js

Sesión 1: Fundamentos de Vue.js

Creación del proyecto con create-vue y Vite: SFC con <script setup> y TypeScript
Templates, directivas, eventos y manejo de estilos (CSS scoped y utilidades tipo Tailwind CSS)
Componentes, ciclo de vida y organización de la interfaz con Composition API

Sesión 2: Estructura y reactividad en Vue.js

Reactividad con ref, reactive, computed y watch/watchEffect
Renderizado condicional, renderizado de listas y directivas avanzadas
Novedades de reactividad en Vue 3.5 y 3.6 (props reactivos, alien-signals)

Sesión 3: Manejo del estado local

Comunicación entre componentes: props tipadas, emits y defineModel
Slots, scoped slots y diseño de componentes reutilizables
Composables: extracción y reutilización de lógica de estado (useTemplateRef, useId)

Sesión 4: Herramientas de desarrollo

Vue DevTools y depuración de componentes, estado y reactividad
Calidad de código: verificación de tipos con vue-tsc, ESLint (flat config) y Prettier
Asistentes de IA en el editor: autocompletado y generación de componentes base

Módulo 2: Estado y rutas en Vue.js

Sesión 1: Gestión del estado en Vue.js

Stores con Pinia (setup stores), acciones y getters tipados
Organización del estado: estado global de la aplicación vs. estado del servidor
Persistencia del estado y depuración de stores

Sesión 2: Configuración y uso de Vue Router

Configuración de Vue Router y definición de rutas tipadas
Rutas anidadas, parámetros y guardias de navegación
Lazy loading, prefetch y transiciones de vista (View Transitions API)

Sesión 3: Integración con Firebase

Configuración del SDK modular de Firebase e integración con VueFire
Autenticación de usuarios con Firebase Auth (correo, proveedores externos y MFA)
Firestore: consultas en tiempo real, reglas de seguridad y sincronización offline

Sesión 4: Autorización y control de acceso

Implementación de roles y permisos en el cliente
Gestión de la sesión y del estado de autenticación con Pinia
Guardias de navegación, middleware y rutas protegidas

Módulo 3: Consumo de APIS y autenticación

Sesión 1: Consumo de API Rest en Vue.js

Cliente HTTP con Fetch y Axios: interceptores y configuración por entorno
Peticiones GET, POST, PUT y DELETE con tipado en TypeScript
Estado del servidor con Pinia Colada: caché, deduplicación y actualizaciones optimistas

Sesión 2: Seguridad en el Frontend

Autenticación con OAuth 2.0 / OpenID Connect y flujo PKCE
Manejo de JWT: cookies httpOnly frente a almacenamiento en el navegador
Protección frente a XSS y CSRF, políticas CSP y manejo de secretos en el frontend

Sesión 3: Validaciones y manejo de errores

Validación de formularios con esquemas (Zod/Valibot) y VeeValidate
Manejo global de errores, estados de carga y observabilidad en el cliente
Generación asistida por IA de esquemas de validación y casos de prueba

Sesión 4: Gestión de sesiones y almacenamiento

Almacenamiento en LocalStorage, SessionStorage e IndexedDB
Tokens de acceso, refresh tokens y renovación silenciosa de sesión
Estrategias de logout, expiración y sincronización de sesión entre pestañas

Módulo 4: Optimización e IA

Sesión 1: Performance y optimización de Vue.js

Métricas Core Web Vitals (LCP, INP, CLS) y medición del rendimiento en el navegador
Uso eficiente de la reactividad: shallowRef, v-memo y virtualización de listas
Vue 3.6: Vapor Mode y reducción del costo de renderizado de componentes

Sesión 2: Compilación y configuración con Vite

Configuración del entorno de desarrollo con Vite y variables por ambiente
Vite con Rolldown: build de producción, code splitting y análisis del bundle
Pruebas con Vitest y generación de vistas previas de despliegue

Sesión 3: IA como copiloto técnico

Panorama de herramientas actuales (Claude Code, GitHub Copilot, Cursor, ChatGPT)
Prompting técnico y contexto del proyecto (reglas y archivos de instrucciones)
Generación de componentes, refactorización y pruebas asistidas por IA
Revisión crítica del código generado: límites, riesgos y responsabilidad del desarrollador

Sesión 4: Generadores de Apps e IA en el producto

Prototipado rápido con plataformas de generación asistida (v0, Lovable, Bolt, Replit)
Consumo de APIs de LLM desde el frontend: streaming de respuestas y estados de la interfaz
Patrones de interfaz para funcionalidades de IA (chat, asistentes y UI generativa)
Buenas prácticas: costos, latencia, privacidad de datos y experiencia de usuario

Profesor

Jorge Sandoval Flores

Arquitecto de soluciones
Especialista Full Stack

Ver más

Proyectos del profesor

Conoce los proyectos realizados por nuestro profesor

Metodología

Aprenderás con un enfoque práctico. Debes revisar los archivos de estudio y participar en las clases. En cada módulo de estudio, rendirás un examen online y desarrollarás una etapa de tu proyecto de implementación de una web y tienda online con la asesoría del profesor en clase. Al finalizar el curso, podrás exponer tu emprendimiento para recibir las recomendaciones finales del profesor.

Certificación

Se entregarán dos certificados del curso:

Certificado por haber participado, otorgado por Andes – Centro de Negocios Tecnológicos.
Certificado por haber aprobado, otorgado por la Universidad San Martín de Porres.

Profesor