Vue 58: Capstone: A Producción
easy⏱ 5 mincoursevue
Todo lo que aprendiste, funcionando a la vez
Este componente final es deliberadamente pequeño pero toca casi todas las capas del curso: reactividad al estilo ref/computed (mediante un getter de Pinia), un árbol de componentes, checkboxes personalizados y accesibles, y un store real de Pinia conectado con app.use(createPinia()) exactamente como en una app de producción.
// main.js of a real Vue app
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from './router';
import App from './App.vue';
createApp(App)
.use(createPinia())
.use(router)
.mount('#app');
computed activa la celebración
allDone es un getter de Pinia - el equivalente en el store de computed(() => items.value.every(i => i.done)) - así que el panel de felicitación no aparece por estar cableado a mano; es una consecuencia directa y en vivo de tu estado reactivo, el mismo mecanismo que impulsó cada UI dinámica de este curso.
Hacia dónde seguir
Crea un proyecto real con npm create vue@latest, conecta llamadas a una API de verdad, despliégalo, y vuelve a SSR/Nuxt cuando quieras renderizado en servidor real. Reactividad, componentes, composables, enrutamiento, Pinia y despliegue — ya no son teoría: los construiste y los viste correr, en vivo, uno por uno, en este mismo curso. Felicidades — hiciste el viaje completo de cero a héroe.