Vue

Vue es un framework progresivo de JavaScript para construir interfaces de usuario. Creado por Evan You (ex ingeniero de Google), destaca por su curva de aprendizaje suave, su excelente documentación y por sentirse cercano al HTML, CSS y JavaScript que ya conoces. Lo usan empresas como Alibaba, Xiaomi, GitLab, Nintendo y miles de agencias en todo el mundo.

En proyectos reales, Vue se usa para paneles de administración, tiendas en línea, aplicaciones SaaS, sitios interactivos y, con Nuxt, sitios con renderizado en el servidor y buen SEO. También es muy popular en el ecosistema PHP: Laravel lo integra de forma natural con Inertia.

"Progresivo" significa que puedes usarlo para agregar interactividad a una sola parte de una página existente o para construir una aplicación completa con rutas, estado global y servidor. Este curso usa Vue 3.5 con la Composition API y <script setup>, la forma moderna y recomendada.

Qué vas a poder hacer al terminar

• Crear proyectos con Vite y entender los Single File Components (.vue).
• Usar plantillas, directivas y el sistema de reactividad (ref, reactive, computed, watch).
• Construir componentes reutilizables con props, eventos, v-model y slots.
• Agregar navegación con Vue Router y estado global con Pinia.
• Consumir APIs con composables y manejar estados de carga y error.
• Dar tus primeros pasos con Nuxt para sitios con SSR y SEO.

Requisitos previos

• JavaScript moderno: funciones flecha, desestructuración, módulos, promesas y async/await.
• HTML y CSS básicos.
• Node.js instalado (ver Instalación con nvm).
• Opcional: si ya conoces React, en la primera lección comparamos ambos.

Temario

1. Qué es Vue y comparación con React — Filosofía, ventajas y cuándo elegir cada uno.
2. Crear proyecto — create-vue, estructura y Single File Components.
3. Plantillas y directivas — Interpolación, v-bind, v-if, v-for, v-on y v-model.
4. Reactividad — ref, reactive, computed, watch y watchEffect.
5. Componentes, props, emits y slots — Comunicación entre componentes y defineModel.
6. Vue Router — Rutas, parámetros, rutas anidadas y protegidas.
7. Pinia — Estado global con stores.
8. Consumir APIs — fetch, composables y un mini proyecto.
9. Nuxt (introducción) — El framework de Vue para SSR, SEO y full stack.