Tutorial de VueJS 3 para principiantes en 11 capítulos

Vue.js es un framework de JavaScript progresivo: puedes añadirlo a una página existente con una etiqueta script, o construir una aplicación completa con una herramienta de build. Este tutorial toma la segunda vía, la que siguen la documentación oficial y casi todos los proyectos de hoy.

En once capítulos vas a construir una pequeña tienda: una ficha de producto con sus variantes de color, un carrito, un formulario de opiniones y las animaciones que lo acompañan. Cada concepto llega en el momento en que la aplicación lo necesita, nunca antes.

Lo que vas a construir

Una sola aplicación, ampliada capítulo a capítulo. Al final muestra un producto y su imagen, reacciona al pasar el ratón por los colores, desactiva el botón cuando la variante está agotada, llena un carrito, acepta opiniones validadas y las anima al mostrarlas.

El código se reparte en componentes a partir del capítulo 8, como en un proyecto real.

El recorrido en once capítulos

1. Crear una aplicación Vue, el proyecto, createApp, el primer dato reactivo.
2. Enlace de atributos, mostrar la imagen del producto con v-bind.
3. Renderizado condicional, decir si el producto está disponible, con v-if y v-show.
4. Renderizado de listas, la composición del tejido y las variantes, con v-for.
5. Gestión de eventos, el botón que llena el carrito.
6. Enlace de clases y estilos, las muestras de color y el botón desactivado.
7. Propiedades computadas, deducir la imagen y la disponibilidad de la variante elegida.
8. Componentes y props, trocear la aplicación y pasar datos.
9. Comunicación de eventos, hacer subir el clic hasta el padre.
10. Formularios y v-model, el formulario de opiniones y su validación.
11. Transiciones, animar las apariciones y las desapariciones.

El código completo se descarga en la parte de arriba de la página: un proyecto Vite con una carpeta por capítulo y la batería de tests que comprueba cada uno de ellos.

Composition API: el estilo de este tutorial

Vue ofrece dos formas de escribir un componente. La Options API ordena el código en opciones: data, methods, computed. La Composition API lo escribe como simples variables y funciones dentro de un bloque <script setup>.

Este tutorial usa la Composition API porque es el estilo que la documentación oficial recomienda para un proyecto nuevo, y el que vas a encontrar en la mayor parte del código escrito desde Vue 3. Los dos estilos siguen soportados: la Options API no está obsoleta y seguirás cruzándotela durante mucho tiempo en proyectos existentes.

Esta es la tabla de equivalencias, para tenerla a mano.

// Composition API, en <script setup>

data() { return { n: 0 } }         const n = ref(0)
computed: { double() { … } }       const double = computed(() => …)
methods: { faire() { … } }         function faire() { … }
props: { titre: String }           const props = defineProps({ titre: String })
emits: ['valider']                 const emit = defineEmits(['valider'])
mounted() { … }                    onMounted(() => { … })
watch: { n(v) { … } }              watch(n, (v) => { … })

this.n                             n.value   // solo en el script,
                                             // nunca en la plantilla

Cada capítulo que lo necesita recuerda el equivalente en Options API del concepto tratado.

Lo que necesitas

• Las bases de HTML, CSS y JavaScript. Si las funciones flecha y la desestructuración no le dicen nada, repáselas antes de empezar.
• Node.js 22.18 o más reciente (o 24.12 y siguientes). Compruébelo con node -v: el generador de proyectos oficial rechaza las versiones anteriores. Actualice también npm con npm install -g npm@latest: el npm 10 incluido con Node 22 falla en el npm install de un proyecto Vue nuevo.
• Un editor de código. Visual Studio Code con la extensión oficial « Vue – Official » ofrece autocompletado en los archivos .vue. WebStorm y Zed también sirven.

No hace falta saber nada de Vue 2. Si vienes de ahí, quédate con que Vue.use, Vue.mixin y Vue.prototype ya no existen: ahora todo pasa por la instancia de aplicación que devuelve createApp.

Cómo trabajar este tutorial

Escribe el código en lugar de copiarlo. Después de cada capítulo, rompe algo a propósito y lee el mensaje de error: es la mejor manera de aprender a descifrarlos.

Cada capítulo termina con un ejercicio sobre el concepto tratado, que se resuelve con lo que acabas de escribir.

Después de este tutorial

Para conectar la aplicación con datos reales, mira cómo añadir Firebase a una aplicación Vue.

Una vez terminados los once capítulos, el paso siguiente es compartir el estado entre componentes con Pinia, y después el enrutado con Vue Router. En cuanto a arquitectura, mira cómo escribir tus propios plugins de Vue y cómo tratar el posicionamiento de una aplicación Vue.