Vue 58: Capstone: Ship It
easy⏱ 5 mincoursevue
Everything you've learned, running at once
This capstone component is deliberately small but touches nearly every layer of the course: ref/computed-style reactivity (via a Pinia getter), a component tree, accessible custom checkboxes, and a real Pinia store wired up with app.use(createPinia()) exactly like a production app would be.
// 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 gates the celebration
allDone is a Pinia getter - the store equivalent of computed(() => items.value.every(i => i.done)) - so the congratulations panel isn't hardcoded to appear; it's a direct, live consequence of your reactive state, the same mechanism that powered every dynamic UI in this course.
Where to go next
Build a real project with npm create vue@latest, wire up actual API calls, deploy it, and revisit SSR/Nuxt once you want server rendering for real. Reactivity, components, composables, routing, Pinia, and a production build — you built and ran every one of them, one by one, for real, in this very course. Congratulations — you made the full journey from zero to hero.