Vue Mastery
Master Vue — reactivity, composition API, components, routing, state management, testing, and Nuxt deployment. 15 phases from template syntax to production Vue applications.
Your Progress
Complete all 15 phases to master this track
Master Vue — reactivity, composition API, components, routing, state management, testing, and Nuxt deployment. 15 phases from template syntax to production Vue applications.
Phase 1: Project Setup and Your First App
Scaffold a Vite-powered Vue project, understand the entry point, and build your first single-file component.
Scaffolding with create-vue
Generate a project with the official CLI and start the Vite dev server.
Application Entry and Mounting
Create the app instance in main.ts and attach it to the root element.
Single-File Components
Structure template, script, and style blocks inside one .vue file.
Project Structure and Conventions
Organize components, assets, and configuration files into a predictable layout.
Vue Devtools in the Browser
Inspect component trees, props, and emitted events with the browser extension.
Phase 2: Template Syntax and Directives
Render dynamic markup with interpolation, bindings, conditionals, lists, and event handlers.
Text Interpolation and Expressions
Bind values into the DOM with double curly brace expressions.
Conditional Rendering with v-if
Show or remove elements with v-if, v-else-if, and v-show.
Dynamic Attributes with v-bind
Bind attributes, URLs, and class or style objects to component state.
Event Handling with v-on
Respond to clicks, input, and key events with methods and modifiers.
List Rendering with v-for
Render arrays, objects, and ranges while supplying stable keys.
Phase 3: Reactive Refs and the Composition API
Declare reactive state with ref and reactive, then understand the Proxy machinery that powers them.
The script setup Syntax
Declare component logic with the compiler-friendly setup block.
ref for Primitive State
Create reactive scalar values and read them with the value property.
reactive for Objects
Wrap objects directly and mutate properties without dot value.
Common Reactivity Pitfalls
Avoid lost reactivity from destructuring, spreading, and new properties.
How Vue Tracks Reactivity
See the dependency-tracking and trigger cycle behind every update.
Phase 4: Computed Properties and Watchers
Derive cached values with computed and react to state changes with targeted watchers.
Computed Values
Create cached derived state that updates automatically when inputs change.
Writable Computed Values
Define both a getter and a setter for two-way derived state.
Watching Sources with watch
Run side effects when a ref, getter, or reactive object changes.
watchEffect and Automatic Tracking
Run a function that re-executes whenever anything it reads changes.
Choosing Computed vs watch
Decide between cached derivation and imperative side effects correctly.
Phase 5: Components, Props, and Events
Compose interfaces from reusable components with one-way data flow and typed event contracts.
Registering Components
Use components locally in script setup or register them globally.
Declaring and Validating Props
Type parent data with prop definitions and default values.
Emitting Events to Parents
Notify parent components with defineEmits and typed payloads.
One-Way Data Flow Rules
Keep props read-only and move mutations back up through events.
v-model on Custom Components
Build two-way input components with modelValue or the defineModel macro.
Phase 6: Slots, Dynamic Components, and Provide/Inject
Project content into components with slots, swap them dynamically, and share data across deep trees.
Default Slots and Content Projection
Pass markup from parent to child using the slot outlet element.
Dynamic Components with v-bind is
Swap rendered components at runtime with the component built-in.
Caching with keep-alive
Preserve component state and lifecycles across dynamic swaps.
provide and inject Across Layers
Share values with deep descendants without threading props through every level.
Scoped Slots for Render Controls
Let the child pass data back to the parent's slot markup for flexible layouts.
Phase 7: Lifecycles and Composables
Hook into component stages, clean up resources on unmount, and extract reusable logic into composables.
Lifecycle Hooks
Run setup work when the component mounts, updates, and unmounts.
Cleanup on Unmount
Release intervals, event listeners, and sockets when a component is destroyed.
Extracting Logic into Composables
Refactor component state and effects into reusable useX functions.
Flexible Composable Parameters
Accept refs, getters, or plain values while keeping the composable reactive.
Shared State Across Component Instances
Decide when a composable should create state per call or share one instance.
Phase 8: Forms and Validation
Bind inputs with v-model, submit safely, and validate fields manually or with schema libraries.
v-model on Form Inputs
Bind text, textarea, and select elements to reactive state.
Checkbox and Radio Bindings
Bind grouped checkboxes to arrays and radios to a single value.
Form Submission and Reset
Handle submit events, loading states, and resetting fields after success.
Manual Validation State
Track touched fields, error messages, and cross-field rules without a library.
Schema Validation with zod
Define typed schemas once and parse form data for both client and server.
Phase 9: Routing with Vue Router
Map URLs to views, react to parameter changes, lazy-load routes, and guard navigation for auth.
Installing and Wiring Vue Router
Register the router plugin and place the view and link outlets.
Defining Routes and Params
Declare path patterns, named routes, and dynamic segments.
Reactive Route Params in Setup
Read params safely with useRoute and react when only the path changes.
Route-Level Code Splitting
Load view chunks on demand with dynamic import in route definitions.
Navigation Guards
Run global and per-route checks for auth, confirmations, and scrolling.
Phase 10: State Management with Pinia
Centralize shared state in Pinia stores with getters, actions, and devtools-friendly structure.
Creating Pinia Stores
Install Pinia and define stores with the setup-style syntax.
State and Getters
Declare reactive state slices and derive cached values with computeds.
Actions for Async Work
Encapsulate mutations and API calls inside store actions.
Using Stores in Components
Destructure store fields while keeping reactivity intact.
Store Plugins and Devtools
Persist stores, subscribe to changes, and inspect them in the Vue panel.
Phase 11: HTTP Clients and Data Fetching
Fetch data during setup, manage loading and error states, and cache results with query libraries.
Fetching with the Fetch API
Call HTTP endpoints in setup and track loading and error state.
Async setup and Suspense
Await data directly in setup while Suspense shows a fallback.
Error, Empty, and Retry States
Render explicit states for failure, no results, and user-triggered retries.
A Reusable Data-Fetching Composable
Wrap fetch, cancellation, and state into a useResource-style function.
Client-Side Caching with TanStack Query
De-duplicate requests, cache by key, and invalidate after mutations.
Phase 12: Transitions and Animations
Animate element entry and exit with the Transition component, list moves, and JavaScript hooks.
CSS Animations and Keyframes
Drive continuous and state-based animations with plain CSS.
The Transition Component
Wrap elements to animate CSS transitions on enter and leave.
Transition Modes and appear
Sequence out-in or in-out animations and animate on first render.
Animating Lists with TransitionGroup
Animate list insertions, removals, and reordering with move classes.
JavaScript Transition Hooks
Orchestrate animations with JavaScript callbacks and done signals.
Phase 13: Testing with Vitest and Vue Test Utils
Write component and composable tests that assert rendered output, events, and async state changes.
Configuring Vitest
Wire Vitest into the project with globals and environment options.
Mounting Components in Tests
Render components with Vue Test Utils and query the output.
Testing Async Updates
Wait for next tick and flush promises before asserting the DOM.
Testing Composables in Isolation
Exercise useX functions without mounting any component at all.
Mocking Modules and Stubbing Children
Replace fetch, router, and child components for deterministic tests.
Phase 14: Performance Optimization and Server-Side Rendering
Profile slow renders, split bundles, virtualize long lists, and prepare for SSR with Nuxt.
Profiling Render Performance
Find wasted renders with devtools flame graphs and Vite bundle analysis.
Async Components and Code Splitting
Defer heavy components and split vendor code into cacheable chunks.
Server-Side Rendering and Hydration
Understand how HTML from the server becomes an interactive client app.
Virtual Scrolling for Large Lists
Render only visible rows to keep thousands of items responsive.
Nuxt for Full-Stack Vue Apps
Adopt file-based routing, server routes, and server data utilities.
Phase 15: Production Builds and Capstone Project
Configure environment variables, optimize the production bundle, deploy a SPA, and ship a complete capstone app.
Environment Variables in Vite
Expose mode-specific configuration through prefixed import.meta.env values.
Titles, Meta, and SPA SEO
Update document head per route and handle crawler limitations of SPAs.
Production Build Optimization
Tune minification, source maps, and chunk strategy for the final bundle.
Deploying a Single-Page App
Configure host rewrite rules and base paths for client-side routing.
Capstone: A Production SPA
Build and ship a complete app with routing, store, API layer, tests, and deployment.