Vue.js Tutorial

Vue.js Basics Explained — Complete Beginner's Guide

Master Vue.js from scratch: reactive data, template syntax, directives, computed properties, watchers, and lifecycle hooks. Build your first interactive Vue app today.

Vue Components Explained — Props, Slots, and Communication

Master Vue components: creating and registering components, props, emits, slots, scoped slots, dynamic components, KeepAlive, provide/inject, and scoped styling — with reusable component patterns.

Vue Router Complete Guide — SPA Routing & Navigation

Learn Vue Router from setup to advanced patterns: route definitions, nested routes, navigation guards, lazy loading, params, query strings, scroll behavior, and 404 handling.

Vue.js Advanced Guide — Composition API, Pinia & More

Master advanced Vue.js: Composition API with script setup, composables, Pinia state management, Teleport, Suspense, transitions, custom directives, render functions, error handling, and performance tips.

Vue Introduction — Your First Steps with Vue.js

Learn Vue.js introduction: what Vue is, how it compares to React and Angular, progressive framework philosophy, CDN setup, and creating your first Vue application.

Vue Instance Explained — The Root of Every Vue App

Learn Vue instance: createApp, mounting, data properties, methods, computed properties, lifecycle hooks, and the component tree in Vue.js 3.

Vue Template Syntax Explained — Interpolation and Directives

Learn Vue template syntax: text interpolation, raw HTML, attribute bindings, JavaScript expressions, directives like v-bind v-if v-for v-on v-model and shorthand syntax.

Vue.js API Reference & Cheatsheet

Complete Vue.js reference covering directives, Composition API, Options API, built-in components, lifecycle hooks, Pinia, Vue Router, and template syntax. Your go-to quick lookup for all Vue 3 APIs.

Vue Computed Properties and Watchers Explained

Learn Vue computed properties and watchers: computed caching, getters and setters, watcher deep and immediate options, lazy computed vs method, and use cases for each.

Vue Class and Style Bindings Explained — Dynamic Styling

Learn Vue class and style bindings: object and array syntax for classes, inline styles with objects, auto-prefixing, scoped styles, and dynamic CSS variables.

Vue Conditional Rendering Explained — v-if v-show and v-else

Learn Vue conditional rendering: v-if v-else-if v-else for conditional blocks, v-show for display toggling, template v-if groups, and performance considerations.

Vue List Rendering Explained — v-for Directives Deep Dive

Learn Vue list rendering: v-for with arrays objects and ranges, key attribute importance, list filtering sorting, mutation methods, and rendering performance.

Vue Event Handling Explained — v-on and @ Directives

Learn Vue event handling: v-on directive, event modifiers, key modifiers, inline handlers, method handlers, custom events with emit, and event delegation.

Vue Forms and v-model Explained — Two-Way Data Binding

Learn Vue forms: v-model directive for two-way binding, form input types, modifiers like lazy number trim, form validation basics, and custom v-model components.

Vue Component Communication Explained — Props and Emits

Learn Vue component communication: props for parent-to-child data, emits for child-to-parent events, v-model on components, provide/inject, and event bus patterns.

Vue Slots Explained — Content Distribution with Slots

Learn Vue slots: default slots, named slots, scoped slots, slot props, slot fallback content, and advanced slot patterns for flexible component composition.

Vue Lifecycle Hooks Explained — Component Lifecycle

Learn Vue lifecycle hooks: beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted, Composition API equivalents, and practical use cases.

Vue Composition API Explained — Building with Composables

Learn Vue Composition API: setup function, ref and reactive, computed, watch, composable functions, and organizing component logic with composition over mixins.

Vue ref and reactive Explained — Reactivity System

Learn Vue ref and reactive: ref for primitive values, reactive for objects, shallowRef, toRef, toRefs, isRef, unref, and understanding Vue 3 reactivity internals.

Vue reactive Explained — Deep Reactive State Management

Learn Vue reactive: deep reactivity, reactive vs ref, limitations with primitives, proxy-based implementation, readonly, markRaw, and performance considerations.

Vue Computed Properties Deep Dive — Reactive Derivation

Learn Vue computed properties: computed as getter/setter, computed with ref and reactive, computed debugging, writable computed, and performance optimization with caching.

Vue Watch Explained — Watching Reactive Data Changes

Learn Vue watch: watching refs and reactive objects, deep watch, immediate watch, watchEffect, watchPostEffect, flush timing, and practical watching patterns.

Vue Provide and Inject Explained — Dependency Injection

Learn Vue provide and inject: provide data from ancestors, inject in descendants, reactivity with provide, app-level provide, and use cases for dependency injection.

Vue Router Navigation Guards Explained — Route Protection

Learn Vue Router navigation guards: beforeEach beforeResolve afterEach, per-route guards, in-component guards, meta fields for auth, and async guard patterns.

Vuex State Management Explained — Centralized Store

Learn Vuex: state, getters, mutations, actions, modules, map helpers, and when to use Vuex vs Pinia vs component-local state in Vue applications.

Vue Pinia Explained — Modern State Management for Vue

Learn Vue Pinia: store definition, state, getters, actions, composition API stores, plugin system, TypeScript support, and migrating from Vuex to Pinia.

Vue HTTP Requests with Axios — Complete Guide

Learn Vue HTTP requests with Axios: setup interceptors, async actions, error handling, request cancellation, and integrating Axios with Pinia stores and composables.

Vue Mixins Explained — Reusable Component Logic

Learn Vue mixins: creating and using mixins, option merging strategies, global mixins, mixin limitations, and when to prefer composables over mixins in Vue 3.

Vue Custom Directives Explained — Extending HTML

Learn Vue custom directives: creating directives, directive hooks (mounted updated unmounted), passing values and arguments, v-focus v-click-outside v-lazy, and global vs local directives.

Vue Transitions and Animations Explained — Motion in Vue

Learn Vue transitions: Transition component, TransitionGroup, CSS transitions and animations, JavaScript hooks, enter/leave states, page transitions, and custom animation libraries.

Vue Testing Explained — Unit and Component Testing

Learn Vue testing: Vitest for unit tests, Vue Test Utils for component mounting, testing computed properties, emitted events, slots, and mocking API calls.

Vue Dynamic Components Explained — Render Components Dynamically

Learn Vue dynamic components: component element, is attribute, dynamic component switching, keep-alive caching, async components, and dynamic component patterns.

Vue Teleport and Suspense Explained — Advanced Composition

Learn Vue Teleport and Suspense: Teleport for rendering outside the component tree, Suspense for async dependencies, loading states, and error handling in Vue 3.

Vue Project — Build a Complete Vue Application From Scratch

Learn Vue by building a complete project: task management application covering Vue Router, Pinia, Axios, authentication, component architecture, and deployment.

Vue TypeScript Explained — Type-Safe Vue Components

Learn Vue TypeScript: typing props emits refs computed, defineComponent, defineProps with types, component generics, and building type-safe Vue 3 applications.