Domina Vue 3: de fundamentos a producción
Reactividad, Composition API, componentes, slots, Vue Router y Pinia. Editor Monaco con Vue real ejecutándose en vivo en el navegador—aprende practicando.
- Paso 1
Vue 1: ¿Qué es Vue? Tu primera app
Vue es un framework progresivo de JavaScript para construir interfaces de usuario: en vez de crear n...
Comenzar lección - Paso 2
Vue 2: Sintaxis de plantillas e interpolación
Los templates de Vue son HTML con superpoderes. El superpoder más básico es la interpolación de text...
Comenzar lección - Paso 3
Vue 3: Enlace de atributos con v-bind
v-bind te permite enlazar un atributo HTML a una expresión de JS en vez de escribirlo como un string...
Comenzar lección - Paso 4
Vue 4: Manejo de eventos con v-on
v-on escucha eventos del DOM y ejecuta código en respuesta — escribís v-on:click="..." o su forma ab...
Comenzar lección - Paso 5
Vue 5: Enlace bidireccional con v-model
Los formularios necesitan dos cosas a la vez: mostrar el valor actual y actualizarlo cuando el usuar...
Comenzar lección - Paso 6
Vue 6: Renderizado condicional: v-if vs v-show
Vue te da dos formas de mostrar contenido condicionalmente, y se comportan muy distinto. v-if (con r...
Comenzar lección - Paso 7
Vue 7: Renderizado de listas con v-for
v-for repite un elemento una vez por cada ítem de un array (u objeto, o rango numérico), con la sint...
Comenzar lección - Paso 8
Vue 8: Enlaces de clase y estilo
Los atributos estáticos class y style solo llegan hasta cierto punto — :class y :style te permiten c...
Comenzar lección - Paso 9
Vue 9: Propiedades computadas
Una propiedad computada deriva un valor a partir de otro estado reactivo y se vuelve a ejecutar auto...
Comenzar lección - Paso 10
Vue 10: Watchers (observadores)
watch() te permite ejecutar un efecto secundario cada vez que un dato reactivo específico cambia — c...
Comenzar lección - Paso 11
Vue 11: ref vs reactive
La Composition API de Vue te da dos primitivas para estado reactivo: `ref()` envuelve CUALQUIER valo...
Comenzar lección - Paso 12
Vue 12: Fundamentos de la Reactividad
El sistema de reactividad de Vue está construido sobre objetos Proxy nativos de JavaScript. Llamar a...
Comenzar lección - Paso 13
Vue 13: Propiedades Computadas en Profundidad
`computed()` puede tomar una función (de solo lectura, el caso común) o un objeto con `get`/`set` — ...
Comenzar lección - Paso 14
Vue 14: watch vs watchEffect
`watch(source, callback)` observa una fuente **explícita** (un ref, un getter de propiedad reactive,...
Comenzar lección - Paso 15
Vue 15: Composables — Extrayendo Lógica Reutilizable
Un **composable** no es más que una función simple de JavaScript — con el prefijo convencional `use`...
Comenzar lección - Paso 16
Vue 16: Hooks de Ciclo de Vida
Cada instancia de componente de Vue pasa por un **ciclo de vida**: creado, montado (su DOM ya existe...
Comenzar lección - Paso 17
Vue 17: Referencias de Plantilla (Template Refs)
Una **referencia de plantilla (template ref)** te da acceso directo a un elemento real del DOM (o a ...
Comenzar lección - Paso 18
Vue 18: Provide / Inject
`provide(key, value)` (llamado en el `setup()` de un ancestro) hace que un valor esté disponible par...
Comenzar lección - Paso 19
Vue 19: El Modelo Mental de <script setup>
`<script setup>` es **azúcar sintáctico en tiempo de compilación** sobre exactamente el mismo patrón...
Comenzar lección - Paso 20
Vue 20: El Modelo Mental de defineProps / defineEmits
En archivos .vue reales, `defineProps<{...}>()` y `defineEmits<{...}>()` te dan props y eventos pers...
Comenzar lección - Paso 21
Vue 21: Fundamentos de Componentes y Registro
A medida que una app crece, meter todo en un solo template gigante se vuelve inmanejable. Vue permit...
Comenzar lección - Paso 22
Vue 22: Props — Pasando Datos hacia Abajo
Las props son la forma en que un padre entrega datos hacia abajo a un componente hijo. Un hijo decla...
Comenzar lección - Paso 23
Vue 23: Emitiendo Eventos Personalizados
Como las props solo fluyen hacia abajo, un hijo necesita otro mecanismo para comunicarse de vuelta c...
Comenzar lección - Paso 24
Vue 24: v-model en Componentes
v-model en un input nativo en realidad es azúcar sintáctica para enlazar un valor y escuchar una act...
Comenzar lección - Paso 25
Vue 25: Slots por Defecto
Las props pasan datos hacia abajo, pero a veces un componente necesita aceptar MARKUP arbitrario de ...
Comenzar lección - Paso 26
Vue 26: Slots con Nombre y Slots con Alcance
Un componente puede exponer más de un slot nombrándolos — el padre apunta a cada uno con un bloque <...
Comenzar lección - Paso 27
Vue 27: Componentes Dinámicos con <component :is="...">
A veces qué componente renderizar depende del estado en tiempo de ejecución — una interfaz de pestañ...
Comenzar lección - Paso 28
Vue 28: keep-alive
Cambiar <component :is="..."> normalmente destruye la instancia saliente y crea una nueva para el no...
Comenzar lección - Paso 29
Vue 29: Teleport
Los modales, tooltips y menús desplegables a menudo necesitan renderizarse en la parte más alta del ...
Comenzar lección - Paso 30
Vue 30: Atributos de Traspaso (Fallthrough)
Cuando un padre pasa un atributo o listener que el hijo NO declara como prop (ni en emits) — un clas...
Comenzar lección - Paso 31
Vue 31: Modificadores de v-model
Los modificadores de v-model cambian cómo el evento del DOM se mapea a tu estado reactivo. .lazy cam...
Comenzar lección - Paso 32
Vue 32: Enlace de Formularios en Profundidad
Cada control de formulario nativo tiene su propia convención de enlace con v-model. Un checkbox sin ...
Comenzar lección - Paso 33
Vue 33: Setters en Computed
Una propiedad computed normalmente es de solo lectura: una función getter que se recalcula cuando ca...
Comenzar lección - Paso 34
Vue 34: Opciones de Watch — deep, immediate, flush
watch() te permite ejecutar efectos secundarios en respuesta a fuentes reactivas específicas, con co...
Comenzar lección - Paso 35
Vue 35: Componentes Asíncronos + Suspense
defineAsyncComponent envuelve una función loader que devuelve una Promise que resuelve en un compone...
Comenzar lección - Paso 36
Vue 36: Directivas Personalizadas
Los templates cubren casi todo, pero de vez en cuando necesitas acceso directo al elemento real del ...
Comenzar lección - Paso 37
Vue 37: Transiciones
El componente <transition> observa a su único elemento hijo para detectar inserciones y eliminacione...
Comenzar lección - Paso 38
Vue 38: TransitionGroup para Listas
TransitionGroup extiende la misma convención de clases enter/leave a cada elemento de una lista v-fo...
Comenzar lección - Paso 39
Vue 39: Fundamentos de Vue Router
Vue Router convierte una app de Vue en algo que se siente como un sitio de varias páginas sin recarg...
Comenzar lección - Paso 40
Vue 40: Parámetros de Ruta Dinámicos
Un path de ruta puede incluir un segmento dinámico, como /users/:id — los dos puntos marcan un place...
Comenzar lección - Paso 41
Vue 41: Rutas Anidadas
Los layouts reales rara vez son planos — un Dashboard normalmente mantiene un header y un sidebar co...
Comenzar lección - Paso 42
Vue 42: Guardias de Navegación
No todas las rutas deberían ser accesibles para todos, en todo momento. router.beforeEach registra u...
Comenzar lección - Paso 43
Vue 43: Navegación Programática
No toda navegación empieza con un clic en un <router-link> — a menudo necesitas redirigir DESPUÉS de...
Comenzar lección - Paso 44
Vue 44: Fundamentos de Pinia — Un Store Global
Pasar datos hacia abajo con props y burbujear eventos hacia arriba funciona bien para componentes es...
Comenzar lección - Paso 45
Vue 45: Acciones y Getters de Pinia
El estado crudo rara vez es exactamente lo que un template quiere mostrar — un carrito guarda líneas...
Comenzar lección - Paso 46
Vue 46: Componiendo Múltiples Stores
Las apps reales tienen más de un store — usuarios, carritos, notificaciones, configuración — y inevi...
Comenzar lección - Paso 47
Vue 47: Campos Meta de Ruta
La guardia de la lección 42 tenía un solo path fijo, '/admin' — funciona bien para una ruta protegid...
Comenzar lección - Paso 48
Vue 48: Carga Diferida (Lazy) de Rutas
Cada componente de ruta que importas de forma anticipada (eager) termina empaquetado en el JavaScrip...
Comenzar lección - Paso 49
Vue 49: Componentes de Archivo Único y Vite
Las apps de Vue reales no se escriben como un único objeto de JavaScript gigante como hemos estado h...
Comenzar lección - Paso 50
Vue 50: TypeScript con Vue
TypeScript encaja directamente en Vue: ref<T>() y computed<T>() aceptan parámetros de tipo explícito...
Comenzar lección - Paso 51
Vue 51: Pruebas de Componentes
Probar un componente de Vue significa montarlo en un DOM simulado (con Vitest + @testing-library/vue...
Comenzar lección - Paso 52
Vue 52: Rendimiento: v-memo y shallowRef
Vue es rápido por defecto, pero existen dos válvulas de escape para cuando una lista o un objeto son...
Comenzar lección - Paso 53
Vue 53: SSR y el Modelo Mental de Nuxt
El Server-Side Rendering (SSR) ejecuta tu app de Vue primero en el servidor, produciendo un string d...
Comenzar lección - Paso 54
Vue 54: Variables de Entorno y Configuración
Vite lee archivos .env (.env, .env.production, .env.staging, ...) y reemplaza de forma estática cual...
Comenzar lección - Paso 55
Vue 55: Manejo de Errores con onErrorCaptured
La respuesta de Vue a '¿qué pasa si un componente hijo lanza un error?' es onErrorCaptured: un hook ...
Comenzar lección - Paso 56
Vue 56: Fundamentos de Accesibilidad
La accesibilidad no es un paso extra al final - son un puñado de hábitos concretos: preferir element...
Comenzar lección - Paso 57
Vue 57: Build de Producción y Despliegue
Enviar una app de Vue a producción se reduce a un comando y una carpeta: npm run build compila, empa...
Comenzar lección - Paso 58
Vue 58: Capstone: A Producción
Pasaste de un solo ref y una expresión de plantilla hasta apps con enrutamiento, estado, pruebas, ac...
Comenzar lección