FREE TUTORIALS · Learn from zero to expertBusiness DirectoryPut Your Business Ad Here — Free
EasyTutorGuide original ETG logo
Powered by Google
Independent course disclaimer · expand / collapse

These are independently developed tutorials. Technology names belong to their respective owners; no endorsement is implied. Examples are educational, not guarantees. Verify commands, costs, security, browser support, and framework versions before production use. Google Translate requires internet and can make mistakes. Terms · Privacy · Legal.

Fundamentals → Mastery guide · Six levels, practical projects, topic checklist, worked code and results.
EasyTutorGuide · Free practical course · Six levels

Vue.js — from absolute beginner to advanced professional practice

Start without knowing any terminology. Work through the chapters in order, read the small explanations, edit the code, check the visible output, and answer twenty practice questions in every chapter.

145 chapters6 levels20 answered questions per chapterMobile + RTL/LTRYouTube narration flow

Start Chapter 1

Level 1 · Absolute Beginner

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 1: What Vue Is and When to Use It
  2. Chapter 2: Install Node and Create a Vue App
  3. Chapter 3: Vue App Entry Point and createApp
  4. Chapter 4: Single File Components Overview
  5. Chapter 5: The Template Syntax
  6. Chapter 6: Text Interpolation with Braces
  7. Chapter 7: Attribute Binding with v-bind
  8. Chapter 8: Event Binding with v-on
  9. Chapter 9: Script Setup Basics
  10. Chapter 10: Reactive Values with ref
  11. Chapter 11: Displaying a Ref in the Template
  12. Chapter 12: Computed Values Introduction
  13. Chapter 13: Conditional Rendering with v-if
  14. Chapter 14: Showing Content with v-show
  15. Chapter 15: Rendering Lists with v-for
  16. Chapter 16: Choosing Stable List Keys
  17. Chapter 17: Class Binding and Style Binding
  18. Chapter 18: Handling Input with v-model
  19. Chapter 19: Methods in Vue Components
  20. Chapter 20: Emitting an Event to a Parent
  21. Chapter 21: Passing Props into a Child
  22. Chapter 22: Component Composition and Slots
  23. Chapter 23: Build a Reusable Product Card
  24. Chapter 24: Project: Interactive Vue Dashboard

Level 2 · Foundation

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 25: Composition API Versus Options API
  2. Chapter 26: Reactive Objects with reactive
  3. Chapter 27: Refs and Reactive Proxy Differences
  4. Chapter 28: Computed Getters and Setters
  5. Chapter 29: Watching Sources with watch
  6. Chapter 30: watchEffect for Automatic Tracking
  7. Chapter 31: The nextTick Update Cycle
  8. Chapter 32: Template Refs and DOM Access
  9. Chapter 33: Lifecycle Hooks: onMounted
  10. Chapter 34: Lifecycle Cleanup with onUnmounted
  11. Chapter 35: Passing Props with defineProps
  12. Chapter 36: Emitting Events with defineEmits
  13. Chapter 37: Two-Way Component Binding with defineModel
  14. Chapter 38: Named and Default Slots
  15. Chapter 39: Scoped Slots and Slot Props
  16. Chapter 40: Dynamic Components and KeepAlive
  17. Chapter 41: Teleport for Dialogs and Overlays
  18. Chapter 42: Transition and TransitionGroup
  19. Chapter 43: Reusable Composables
  20. Chapter 44: Form Validation and Error Messages
  21. Chapter 45: Search and Filtering Lists
  22. Chapter 46: Drag and Drop Basics
  23. Chapter 47: Persistent State with Local Storage
  24. Chapter 48: Project: Notes App with Categories

Level 3 · Intermediate

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 49: Vue Router Installation
  2. Chapter 50: Defining Routes and Router Views
  3. Chapter 51: Navigation Links with RouterLink
  4. Chapter 52: Dynamic Route Parameters
  5. Chapter 53: Nested Routes and Layouts
  6. Chapter 54: Navigation Guards
  7. Chapter 55: Query Strings and Route State
  8. Chapter 56: State Management with Pinia
  9. Chapter 57: Defining a Pinia Store
  10. Chapter 58: Store Actions and Getters
  11. Chapter 59: Async Requests with Fetch
  12. Chapter 60: Loading, Error, and Empty States
  13. Chapter 61: Abort Requests and Race Conditions
  14. Chapter 62: Server Data Caching Concepts
  15. Chapter 63: Building Composable Fetch Utilities
  16. Chapter 64: Reusable Form Field Components
  17. Chapter 65: Dependency Injection: provide and inject
  18. Chapter 66: Custom Directives
  19. Chapter 67: Async Components and defineAsyncComponent
  20. Chapter 68: Suspense in Vue
  21. Chapter 69: Accessible Menus and Dialogs
  22. Chapter 70: Internationalization with Vue I18n
  23. Chapter 71: Keyboard and Screen Reader Support
  24. Chapter 72: Project: Vue Shopping Cart

Level 4 · Advanced

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 73: TypeScript with Vue SFC
  2. Chapter 74: Typing Props and Emits
  3. Chapter 75: Generic Components and Reusability
  4. Chapter 76: SFC Scoped Styles
  5. Chapter 77: CSS Modules in Vue
  6. Chapter 78: Vite Configuration and Aliases
  7. Chapter 79: Environment Variables and Build Modes
  8. Chapter 80: Vue DevTools and Debugging
  9. Chapter 81: Unit Testing with Vitest
  10. Chapter 82: Vue Test Utils Fundamentals
  11. Chapter 83: Mocking Composables and Pinia
  12. Chapter 84: End-to-End Testing with Playwright
  13. Chapter 85: Component Library Design
  14. Chapter 86: Accessible Forms and Field Errors
  15. Chapter 87: Reusable Table Components
  16. Chapter 88: Virtual Scrolling Concepts
  17. Chapter 89: Responsive Dashboard Layouts
  18. Chapter 90: The Composition API Reuse Strategy
  19. Chapter 91: Performance: Computed versus Watchers
  20. Chapter 92: Performance: Shallow Ref and markRaw
  21. Chapter 93: Avoiding Reactive Object Pitfalls
  22. Chapter 94: Error Handling and Error Boundaries
  23. Chapter 95: SEO and Metadata Strategies
  24. Chapter 96: Project: Admin Dashboard

Level 5 · Expert

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 97: SSR with Vue and Nuxt
  2. Chapter 98: Nuxt Project Structure
  3. Chapter 99: File-Based Routing in Nuxt
  4. Chapter 100: Nuxt Data Fetching
  5. Chapter 101: Hydration and Client-Only UI
  6. Chapter 102: Static Site Generation
  7. Chapter 103: Lazy Hydration Concepts
  8. Chapter 104: Server API Routes in Nuxt
  9. Chapter 105: Authentication Flow in Nuxt
  10. Chapter 106: Pinia and SSR State
  11. Chapter 107: Vue Custom Renderers Overview
  12. Chapter 108: Render Functions and h
  13. Chapter 109: JSX in Vue
  14. Chapter 110: defineExpose and Public Instances
  15. Chapter 111: Advanced Slots and Renderless Components
  16. Chapter 112: Reactivity Under the Hood
  17. Chapter 113: effectScope and Cleanup
  18. Chapter 114: toRef and toRefs
  19. Chapter 115: Custom Ref Implementations
  20. Chapter 116: Dynamic Forms Driven by Schemas
  21. Chapter 117: Accessibility Audits for Vue Apps
  22. Chapter 118: Security and Template Injection
  23. Chapter 119: Bundle Splitting and Code Loading
  24. Chapter 120: Project: Content Publishing App

Level 6 · Mastery

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 121: Designing Large Vue Applications
  2. Chapter 122: Feature-Based Component Organization
  3. Chapter 123: Domain-Driven Composables
  4. Chapter 124: Optimistic UI and Error Recovery
  5. Chapter 125: Caching and Request Deduplication
  6. Chapter 126: Infinite Lists and Pagination
  7. Chapter 127: Offline-First Vue Apps
  8. Chapter 128: Progressive Web App Setup
  9. Chapter 129: Role-Based Navigation
  10. Chapter 130: Secure Storage and Sensitive Data
  11. Chapter 131: Multilingual and RTL Vue Apps
  12. Chapter 132: Accessible Design System Architecture
  13. Chapter 133: Complex Forms and Validation Strategy
  14. Chapter 134: Performance Budgets and Core Web Vitals
  15. Chapter 135: Testing Strategy Across Layers
  16. Chapter 136: Visual Regression Testing
  17. Chapter 137: CI and Automated Quality Gates
  18. Chapter 138: Production Error Tracking
  19. Chapter 139: Deploy Vue to Hostinger
  20. Chapter 140: Deploy Nuxt with Server Support
  21. Chapter 141: SEO for Public Pages
  22. Chapter 142: Migration from Vue 2 to Vue 3
  23. Chapter 143: Capstone: Appointment Booking App
  24. Chapter 144: Capstone: Inventory Dashboard
  25. Chapter 145: Mastery: Review and Optimize Vue Architecture

How to learn like a complete beginner

You do not need to learn every word in one reading. Read the lesson, type the example, look at its real output, change one part, and explain what changed. Return when you have forgotten something. For frameworks requiring an installer or compiler, the source must be tested in a real project—not only in the browser-only illustration.

Suggest an improvement or share a learning idea on the blog.

Disclaimer, trademarks and learning guidance

Independent educational material. External names are used solely to identify subjects. These tutorials are not official training or certification. Output may vary by browser and software version. If a framework requires a build tool, the standalone browser demonstration is an illustration, not execution of the framework source. Always test your own code before publication. Legal notice.