Vue Masterclasses
Step-by-step, module-by-module masterclasses covering Vue 2 (Options API, Vuex, Vue Router v3) and Vue 3 with TypeScript (Composition API, Proxy reactivity, Pinia, RBAC routing).
Vue 2 — Module 1 & 2: Tooling and Options API Foundation
Set up Vue 2.7 with Vite instead of legacy Vue CLI, then master the Options API foundation: the instance lifecycle, Object.defineProperty reactivity internals, directives, and a full Product Inventory Manager component.
Vue 2 — Module 3 & 4: Architecture, Vuex 3 & Vue Router v3
Advanced component communication, Mixins vs Scoped Slots, modular Vuex 3 state management, Vue Router v3 navigation guards and code splitting, and a fully authenticated dashboard example with custom directives.
Vue 2 — Module 5: Reactivity Edge Cases & Render Functions
The exact limitations of Object.defineProperty reactivity, Vue.set/Vue.delete, the VNode/Virtual DOM structure, and a manual render(h) function powering a high-performance data table for large datasets.
Vue 2 — Module 6: Enterprise Performance, Memory & SEO
Diagnosing and fixing memory leaks, async components and Vite bundle optimization, SSR/prerendering for SEO, and a strict-cleanup example integrating a heavy third-party charting library.
Vue 3 & TS — Module 1: Enterprise Init & Strict TypeScript Setup
Configure a production-grade Vue 3 + Vite + TypeScript pipeline with strict tsconfig.json, path aliases, and module resolution, then dissect exactly how <script setup lang="ts"> compiles to optimized render functions.
Vue 3 & TS — Module 2: The Proxy-Based Reactivity Engine
Dissect Vue 3's Proxy-based track/trigger reactivity model versus Vue 2's Object.defineProperty, master ref/reactive/computed/watch/watchEffect trade-offs, and build a high-frequency telemetry dashboard with explicit performance boundaries.
Vue 3 & TS — Module 3: Advanced TypeScript Integration & Component Design
Master strictly-typed defineProps/defineEmits/defineExpose, Vue 3.3+ generic components, type-safe provide/inject with InjectionKey, and build a fully generic autocomplete dropdown component with strict slot contracts.
Vue 3 & TS — Module 4: Enterprise State Management with Pinia
Contrast Pinia's flat store architecture against Vuex, master Setup Stores vs Option Stores, storeToRefs, cross-store communication, and a custom persistence/analytics plugin, then build a multi-step checkout state machine.
Vue 3 & TS — Module 5: Advanced Routing, Guards & Code Splitting
Configure type-safe Vue Router v4 routes with typed meta fields, implement multi-role navigation guards and async hydration, optimize delivery with route-level code splitting and Suspense, and build an enterprise RBAC routing system.
Vue 3 & TS — Module 6: Composables, Memory & Performance
Write functional and stateful composables with correct cleanup via onUnmounted and onScopeDispose, understand compiler-informed patch flags and hoistStatic, and build a memory-safe useWebSocket composable with auto-reconnection.