Week 0 (Prep, 3–5 hrs) — Environment & JS refresh
Goals
Install Node LTS, pnpm/npm, Git, VS Code, Vue/Volar extensions.
Create a starter with Vite: npm create vue@latest. Run, build, and lint.
JavaScript refresh: modules, arrow functions, destructuring, async/await, array methods.
Deliverables
“hello-vue” Vite app in a Git repo.
10 short JS katas (map/filter/reduce, promises).
Fast-Track: Skip JS refresh if you’re fluent.
Lite: Do only the tool installs + 3 katas.
Week 1 — Vue Fundamentals & SFCs
What to learn
SFC structure (<template>, <script setup>, <style>), reactivity basics (ref, reactive), template syntax, directives (v-if, v-for, v-model), events & props.
Step-by-step (approx.)
Day 1: SFC anatomy, template syntax; build a counter with ref.
Day 2: v-if/v-for; list rendering; keying; simple Todo list.
Day 3: Props & emits; parent/child communication.
Day 4: v-model on inputs and custom components.
Day 5: Computed & watch; derived state & side effects.
Day 6: Styles & scoped CSS; class/style bindings.
Day 7: Mini-project polish & README.
Deliverable
“Mini-Todo” with add/toggle/delete, filters, and README (screenshots included).
Week 2 — Composition API Deep Dive & Component Patterns
What to learn
script setup, composables (reusable logic), lifecycle (onMounted, etc.), slots & scoped slots, provide/inject, dynamic & async components, transitions.
Steps
Day 1–2: Composition API vs Options; convert small components.
Day 3: Build a custom composable (useLocalStorage, useFetch).
Day 4: Slots & scoped slots; build a Modal & DataTable.
Day 5: Provide/Inject for cross-tree deps.
Day 6: Transitions for enter/leave; route transitions demo.
Day 7: Refactor Week-1 app to composables + transitions.
Deliverable
A tiny component library: Modal, Button, Input, DataTable with slots.
Week 3 — Routing & State (Vue Router + Pinia)
What to learn
Nested routes, lazy loading, route params/guards, scroll behavior.
Global state with Pinia: stores, getters, actions, persistence.
Steps
Day 1–2: Add Vue Router; Home/List/Detail routes; lazy loaded views.
Day 3: Guards for auth-like flows; error/404 route.
Day 4–5: Pinia store for cart/favorites/auth; optimistic updates pattern.
Day 6: Persist store to localStorage; reset on logout.
Day 7: Milestone review.
Deliverable
“Vue Shop Lite”: browse, detail, cart (Pinia), guarded checkout.
Week 4 — Forms, Validation, and Server I/O
What to learn
Controlled forms, async validation, debouncing; fetch/Axios; error handling; loading & empty states; Suspense; caching basics.
Steps
Day 1–2: Complex form with v-model, custom inputs, validation (e.g., vee-validate or custom).
Day 3–4: API CRUD against a public API or local mock (json-server).
Day 5: Loading, error, retry, and empty states; UX patterns.
Day 6: Simple caching (store or composable) + invalidation.
Day 7: Review & refactor.
Deliverable
“Contacts Admin”: list/search/sort/paginate, create/edit/delete with validations.
Week 5 — UI Polish, Reusability & Performance Basics
What to learn
Reusable patterns, accessibility checks, transitions/animations, code-splitting, devtools performance, avoiding over-reactivity.
Steps
Day 1: Audit components for A11y (labels, focus, keyboard).
Day 2: Animations with transitions; micro-interactions.
Day 3: Memoization & computed vs watch; identify reactive pitfalls.
Day 4: Route & component-level code splitting; prefetch.
Day 5–6: Extract reusable blocks as composables/components.
Day 7: Performance pass: devtools timelines, flame graphs basics.
Deliverable
Polished UI kit + perf report (notes/screenshots).
Week 6 — Testing & Quality (Vitest, Vue Test Utils, Cypress)
What to learn
Unit tests, component tests, mocking stores/router, e2e smoke tests, lint/format.
Steps
Day 1–2: Vitest + Vue Test Utils; test a form & a store.
Day 3: Mock router/Pinia; test navigation & store side effects.
Day 4: Add 2–3 e2e tests with Cypress (or Playwright).
Day 5: Pre-commit hooks (lint-staged), CI basics (GitHub Actions).
Day 6–7: Convert bugs into tests; coverage goal (~70% lines).
Deliverable
Test suite in your Week-3/4 app + CI badge.
Week 7 — TypeScript with Vue + Build & Deploy
What to learn
TS in SFCs, typing props/emit/composables/stores, generics; env vars; building for prod; deployment (Netlify/Vercel).
Steps
Day 1–2: Incrementally add TS; fix types in stores & composables.
Day 3: Env & config, aliases, path mapping.
Day 4: Production build analysis; bundle size inspection.
Day 5: Deploy to Netlify/Vercel with preview URLs.
Day 6–7: Create a short “How I built it” blog/README.
Deliverable
Deployed app + typed codebase + README with architecture diagram.
Week 8 — Capstone (Portfolio-ready)
Project idea (choose one)
Real-World Dashboard: Auth, role-based views, charts, filters, settings.
Kanban/Tasks App: Drag-and-drop, search, tags, offline cache.
Course Catalog: Nested routes, server-side pagination, wishlist, reviews.
Scope checklist
Auth flow (mock/JWT), Router guards, Pinia stores (2+), forms with validation, API module, loading/error/empty states, at least 10 unit tests + 2 e2e, type-safe components, polished UI kit, deployed URL.
Deliverables
Live URL, repo, test report, short Loom demo (5–7 min).
Optional Nuxt Track (Parallel or Post-Capstone, 1–2 weeks)
Pages/layouts, server routes, data fetching (useAsyncData), SEO/meta.
Port a subset of your capstone to Nuxt and compare DX & SSR benefits.
Daily Time Templates
2 hrs/day (recommended): 1 hr learning → 1 hr building/refactor/tests.
45 min/day (lite): 25 min learning → 20 min micro-feature.
Weekend warrior: 4–5 hrs Sat + 2–3 hrs Sun; skim weekdays (notes only).
Checkpoints & Self-Assessment (end of each week)
Can I explain ref vs reactive, and when to use computed vs watch?
Can I design a component API (props/emits/slots) and document it?
Can I fetch, cache, and invalidate API data cleanly?
Can I set up Router/Pinia from scratch without docs?
Do I have tests preventing regressions on critical flows?
Is my app deployable with a one-command build?
Stretch Goals (anytime)
Internationalization (i18n), file uploads, infinite scrolling/virtual lists.
Drag-and-drop, charts, accessibility audits with automated tooling.
PWA (offline, installable), dark mode, feature flags.
By following this structured timeline, you will gradually build your skills from Vue.js basics to advanced application development. Each week ensures you not only learn new concepts but also apply them in real projects, leading to a strong portfolio. At the end of this journey, you’ll have a professional-level deployed Vue.js application, reusable component library, and testing knowledge—making you job-ready and confident in Vue.js development.
