Complete Vue.js Course
60 chapters from modern project setup through production architecture.
Chapter 1: Vue.js Overview and Modern Project Setup
What Vue Is, How Vue Updates the Interface, Creating a Project with create-vue, Vite Development Workflow, Understanding the Project Structure
Open chapterChapter 2: JavaScript Essentials for Vue
Variables Objects and Arrays, Functions and Arrow Functions, Destructuring and Spread, Array Methods, Modules Promises and async await
Open chapterChapter 3: Creating a Vue Application
createApp, The Root Component, Mounting an Application, Application Configuration, Multiple Application Instances
Open chapterChapter 4: Single-File Components
The .vue File Structure, Template Section, Script Section, Style Section, Scoped Styles
Open chapterChapter 5: Template Syntax
Text Interpolation, Raw HTML with v-html, Attribute Bindings, JavaScript Expressions, Dynamic Arguments
Open chapterChapter 6: Reactivity Fundamentals
What Reactivity Means, ref, reactive, Reading and Updating Reactive Values, Deep and Shallow Reactivity
Open chapterChapter 7: Computed Properties
Creating Computed Values, Computed Caching, Writable Computed, Computed vs Methods, Computed Dependencies
Open chapterChapter 8: Class and Style Bindings
Dynamic Classes, Object Class Syntax, Array Class Syntax, Inline Style Bindings, Automatic Prefixing
Open chapterChapter 9: Conditional Rendering
v-if, v-else, v-else-if, v-show, Choosing v-if or v-show
Open chapterChapter 10: List Rendering
v-for with Arrays, v-for with Objects, Using key, Filtering and Sorting Lists, v-for with Components
Open chapterChapter 11: Event Handling
v-on and @, Method Handlers, Inline Handlers, Event Modifiers, Key and Mouse Modifiers
Open chapterChapter 12: Form Input Bindings
v-model Basics, Text and Textarea, Checkboxes and Radio Buttons, Select Elements, v-model Modifiers
Open chapterChapter 13: Lifecycle Hooks
onMounted, onUpdated, onUnmounted, Lifecycle Timing, Choosing the Correct Hook
Open chapterChapter 14: Watchers
watch, watchEffect, Watching Multiple Sources, Cleanup, Deep and Immediate Watchers
Open chapterChapter 15: Template Refs
DOM Template Refs, Component Template Refs, useTemplateRef, Refs inside v-for, Ref Timing
Open chapterChapter 16: Component Basics
Defining Components, Using Components, Component Registration, Local vs Global Registration, Component Naming
Open chapterChapter 17: Props
Declaring Props, Prop Types, Default Values, Boolean Props, One-Way Data Flow
Open chapterChapter 18: Component Events
Declaring Emits, Emitting Events, Event Arguments, Validating Events, v-model with Component Events
Open chapterChapter 19: Component v-model
defineModel, v-model Arguments, Multiple v-model Bindings, Modifiers, Designing Two-Way Component APIs
Open chapterChapter 20: Slots
Default Slots, Named Slots, Scoped Slots, Fallback Content, Slots vs Props
Open chapterChapter 21: Provide and Inject
provide, inject, App-Level Provide, Reactive Provided Values, Avoiding Injection Coupling
Open chapterChapter 22: Composables
What a Composable Is, Extracting Reusable Logic, Composables with Refs, Composables with Side Effects, Designing a Clean Composable API
Open chapterChapter 23: Composition API with script setup
script setup, defineProps, defineEmits, defineExpose, Top-Level Bindings in Templates
Open chapterChapter 24: Options API
data, methods, computed, watch, Lifecycle Options
Open chapterChapter 25: Composition API vs Options API
Choosing an API Style, Organizing by Feature, Reusing Logic, Team Consistency, Migrating Between Styles
Open chapterChapter 26: Dynamic Components
component :is, Switching Component Types, Preserving Props, Dynamic Component Events, Use Cases
Open chapterChapter 27: KeepAlive
Caching Component Instances, include and exclude, max, Activated and Deactivated Hooks, State Preservation
Open chapterChapter 28: Teleport
What Teleport Does, Modal Rendering, Teleport Targets, Disabling Teleport, Accessible Dialog Structure
Open chapterChapter 29: Transition
Enter and Leave Transitions, CSS Transition Classes, JavaScript Hooks, Transition Modes, Reusable Transition Components
Open chapterChapter 30: TransitionGroup
Animating Lists, Stable Keys, Move Transitions, Enter and Leave in Lists, Performance Considerations
Open chapterChapter 31: Async Components
defineAsyncComponent, Loading Components, Error Components, Timeouts, Suspensible Async Components
Open chapterChapter 32: Suspense
Suspense Boundaries, Default and Fallback Slots, Async setup, Nested Suspense, Designing Loading States
Open chapterChapter 33: Custom Directives
Directive Basics, Directive Hooks, Binding Values, Directive Arguments, When a Component Is Better
Open chapterChapter 34: Plugins
Creating a Plugin, app.use, Global Properties, Provide from Plugins, Plugin Design Boundaries
Open chapterChapter 35: Vue Router Fundamentals
Creating a Router, Route Records, RouterView, RouterLink, History Modes
Open chapterChapter 36: Dynamic and Nested Routes
Route Params, Nested Routes, Named Routes, Catch-All Routes, Route Matching
Open chapterChapter 37: Navigation Guards
Global Guards, Per-Route Guards, In-Component Guards, Redirects, Guard Error Handling
Open chapterChapter 38: Router Data and Navigation UX
Route Meta, Data Fetching Patterns, Loading Indicators, Scroll Behavior, Navigation Failures
Open chapterChapter 39: Pinia Fundamentals
Creating Pinia, Defining a Store, State, Getters, Actions
Open chapterChapter 40: Advanced Pinia
Store Composition, Store Subscriptions, Plugins, Testing Stores, SSR Considerations
Open chapterChapter 41: TypeScript with Vue
Typing Props, Typing Emits, Typing Refs, Typing Template Refs, Typing Provide and Inject
Open chapterChapter 42: Reusable Component API Design
Prop Design, Event Design, Slot Design, Exposed Methods, Avoiding Over-Configuration
Open chapterChapter 43: Accessibility in Vue
Semantic HTML, Accessible Forms, Keyboard Interaction, Focus Management, ARIA Usage
Open chapterChapter 44: Testing Vue Components
Vue Test Utils, Mounting Components, Finding Elements, Triggering Events, Testing Props and Emits
Open chapterChapter 45: Integration and End-to-End Testing
Testing Component Workflows, Mocking Network Requests, Testing Router Flows, Testing Pinia Flows, End-to-End Scenarios
Open chapterChapter 46: Data Fetching
fetch in Vue, Loading Error and Empty States, AbortController, Race Conditions, Reusable Fetch Composables
Open chapterChapter 47: Performance Optimization
Vue DevTools, Computed vs Methods, v-once and v-memo, Large List Strategies, Measuring Before Optimizing
Open chapterChapter 48: Code Splitting and Lazy Loading
Dynamic Imports, Lazy Routes, Async Components, Chunk Boundaries, Loading Failures
Open chapterChapter 49: Security in Vue Applications
Escaped Interpolation, v-html Risks, URL Validation, Client Secrets, Server-Side Authorization
Open chapterChapter 50: Authentication Interfaces
Authentication State, Login and Logout, Protected Routes, Role-Based UI, Session Expiration
Open chapterChapter 51: Internationalization and RTL
Locale Selection, Translated Messages, Date and Number Formatting, Arabic and Persian RTL, Keeping Code LTR
Open chapterChapter 52: Responsive Vue Interfaces
Mobile-First Layout, Responsive Components, Container Query Concepts, Responsive Navigation, Preventing Horizontal Overflow
Open chapterChapter 53: Animations and Motion
CSS Animation, Transition Components, List Motion, JavaScript Animation Hooks, Reduced Motion
Open chapterChapter 54: Server-Side Rendering
What SSR Solves, createSSRApp, Rendering on the Server, Hydration, Hydration Mismatches
Open chapterChapter 55: SSR State and Data
Per-Request State, Data Prefetching, Serializing State, Hydrating State, Avoiding Cross-Request Pollution
Open chapterChapter 56: Framework Integration
When a Vue Framework Helps, SSR Framework Concepts, Static Generation, Hybrid Rendering, Choosing Rendering Per Route
Open chapterChapter 57: Deployment and Production Builds
Vite Production Build, Environment Variables, Static Hosting, Caching Assets, Deployment Verification
Open chapterChapter 58: Monitoring and Error Handling
app.config.errorHandler, onErrorCaptured, Performance Monitoring, Logging Context, Release Tracking
Open chapterChapter 59: Application Architecture
Feature-Based Folders, Component Boundaries, State Boundaries, Composable Boundaries, Refactoring Strategies
Open chapterChapter 60: Capstone Projects and Production Checklist
Planning a Vue Application, Building a Dashboard, Building a Form Workflow, Building a Routed Application, Production Review Checklist
Open chapter