Chapter 112: Vue Syllabus

Syllabus structured:

A realistic, production-ready Vue 3 Syllabus (2025–2026 edition) the exact learning path I would personally teach someone who wants to go from “I know HTML/CSS/JS” → “I can build real, maintainable, performant Vue applications in 2026”

This is not a copy-paste from vuejs.org or a random Udemy outline. This is what actually works in 2025–2026 real projects (based on what companies in India, Europe & US are building right now).

I divided it into 7 clear levels with:

• duration estimate (assuming 8–12 hours/week)
• must-learn topics
• nice-to-have / stretch topics
• real-world project / exercise at the end of each level
• recommended free & paid resources (2026 up-to-date)

Level 0 – Prerequisites (1–3 weeks)

Goal: Make sure the foundation is strong — skip if you’re already comfortable

Must-have:

• Modern JavaScript (ES6+) — arrow functions, destructuring, spread/rest, modules, async/await, Promise
• Basic TypeScript (types, interfaces, generics) — you don’t need to master it yet, but you must not be afraid of : string and Ref<number>
• Git basics (commit, branch, push, pull request)
• npm / pnpm / yarn basics
• VS Code + Volar extension + Vue Devtools

Project: None — just make sure you can create a Vite + Vue + TS project and see “Hello World”

Level 1 – Vue Fundamentals – Reactivity & Core Syntax (3–5 weeks)

Must-learn (do in this order):

1. Vite + Vue 3 project setup (pnpm create vite)
2. <script setup> syntax (forget Options API for now)
3. ref() vs reactive() — when to use which
4. .value unwrapping rules
5. computed() — caching & dependencies
6. watch() & watchEffect() — differences, flush, onCleanup, multiple sources
7. Template syntax refresh: v-bind:, :, @, v-model, .trim/.number/.lazy
8. v-if vs v-show — performance & use-cases
9. v-for + :key — why index is dangerous
10. Class & style bindings (object & array syntax)
11. Event modifiers (.stop, .prevent, .once, .self)
12. Template refs (ref=”…”) + onMounted access

Project: Counter + Todo List (with add, toggle, delete, filter, animations via <TransitionGroup>)

Resources (free):

• Official Vue 3 docs – Essentials section
• Vue Mastery free courses (first 3–4 are free)
• Laracasts – Vue 3 series (first 10 lessons free)

Level 2 – Components, Communication & Composition (4–6 weeks)

Must-learn:

1. defineProps<…>() + TypeScript props
2. defineEmits<…>() + type-safe events
3. v-model on custom components (modelValue + update:modelValue)
4. Multiple v-model (v-model:title, v-model:body)
5. defineExpose({ … }) — when & why parent needs to call child methods
6. Slots — default, named, scoped (#item=”{ item }”), shorthand #header
7. <slot> fallback content + $slots checks
8. Provide / Inject (avoid prop drilling)
9. watch on props + immediate: true
10. shallowRef / shallowReactive — when to use
11. readonly / shallowReadonly — protecting state
12. Component naming & registration (defineOptions)

Project: Reusable Modal + Form + Tabs (Modal with expose open/close, form with multiple v-model, tabs with <KeepAlive>)

Level 3 – Real Application Architecture (5–8 weeks)

Must-learn:

1. Pinia (stores, setup stores, $patch, actions, getters)
2. Vue Router (dynamic routes, nested routes, navigation guards)
3. <Suspense> + async components (defineAsyncComponent)
4. <Transition> + <TransitionGroup> (list animations)
5. <Teleport> (modals, tooltips, toasts)
6. <KeepAlive> + onActivated / onDeactivated (scroll restore, pause/resume)
7. Error handling — onErrorCaptured, global app.config.errorHandler, <ErrorBoundary>
8. Custom composables (useFetch, useForm, useDebounce, useInfiniteScroll)
9. nextTick() — when & why
10. toRef / toRefs / toValue helpers
11. markRaw / unref / isRef utilities

Project: Mini Dashboard (auth + sidebar + tabs + data table + chart + modal form + error boundary + Pinia + router)

Level 4 – Advanced Patterns & Performance (6–10 weeks)

Must-learn:

1. v-memo — surgical performance optimization
2. shallowRef + triggerRef — manual reactivity control
3. customRef — debounce / throttle refs
4. Reactivity debugging (onRenderTracked / onRenderTriggered)
5. useTemplateRef (Vue 3.5+)
6. <script setup> + defineOptions (name, inheritAttrs, etc.)
7. Global error boundaries + fallback UI
8. Suspense + streaming SSR (Nuxt / Vite SSR)
9. Teleport + multiple teleport targets
10. Provide/Inject with symbols + type safety
11. Dependency injection patterns (container + inject key)

Project: Real-time Chat / Feed (infinite scroll, auto-scroll, WebSocket simulation, <KeepAlive> tabs, v-memo on heavy parts, error boundary)

Level 5 – Production & Ecosystem (ongoing)

Must-learn:

1. TypeScript deep dive (generics for composables, defineProps types)
2. Pinia devtools + state persistence
3. VueUse library (useDark, useStorage, useDebounceFn, useInfiniteScroll…)
4. Vitest + Vue Test Utils (unit + component testing)
5. Storybook for Vue 3 (component catalog)
6. Tailwind + UnoCSS / Headless UI / Radix Vue
7. i18n (vue-i18n)
8. PWA / offline support
9. Nuxt 3 basics (pages, layouts, composables, server routes)
10. Deployment (Vercel, Netlify, Cloudflare Pages)

Project: Portfolio / SaaS Starter (auth, dashboard, CRUD, dark mode, i18n, tests, Storybook, deploy)

Final Recommended Learning Path (2026)

Level 1 → 3–5 weeks Level 2 → 4–6 weeks Level 3 → 5–8 weeks Level 4 → 6–10 weeks Level 5 → ongoing (parallel with real work)

Total realistic timeline (8–12 h/week): 5–9 months to reach senior-level confidence

Best free resources right now (Feb 2026)

• Official Vue 3 docs + SFC Playground
• Vue Mastery (many free courses)
• Laracasts Vue 3 & Pinia series (first 10–15 free)
• Vue School free tier
• Net Ninja Vue 3 playlist (YouTube)
• Daniel Kelly – Vue 3 Deep Dive (YouTube)
• Mayashavin – Vue Mastery deep dives (YouTube)
• Anthony Fu – VueUse docs + examples
• Nuxt 3 official docs (even if not using Nuxt yet)

Which level do you want to start with? Or tell me your current level (beginner / intermediate / already building apps?) and I’ll give you personalized 4-week plan with exact exercises & resources.

Ready to start Exercise 1 together right now? 🚀