Vue Js Study Notes

Building and Deploying a Vue App

Walks through producing a production build of a Vue application with Vite, understanding environment variables and asset handling, and common deployment target…

Common Vue.js Pitfalls

Surveys the most frequent mistakes Vue 3 developers make around reactivity, prop mutation, key usage in lists, and lifecycle timing, with guidance on how to av…

Composables Explained

Understand what composables are, why they replace mixins as Vue's primary reuse pattern, and the conventions they follow.

Computed Caching and Performance

Explains how Vue's computed properties memoize their results based on reactive dependencies, and how to use that caching behavior deliberately to avoid wastefu…

Computed Properties

How Vue's computed() function derives cached, reactive values from other state, and why it's preferred over methods for derived data in templates.

Conditional Rendering: v-if and v-show

Explains Vue's two conditional rendering directives, how they differ at the DOM level, and how to choose the right one for performance and correctness.

Creating a Vue Application

How to scaffold, structure, and bootstrap a Vue 3 project using create-vue and Vite, including the root app instance and mounting process.

Defining and Registering Components

Covers how to author Single-File Components in Vue 3 and the difference between local and global component registration, with guidance on when to use each.

Dynamic Routes and Route Params

Learn how to define route paths with dynamic segments and read those values reactively inside components using route params.

Emitting Custom Events

Learn how child components communicate upward to parents using Vue's custom event system, including typed emits and the defineEmits macro.

Event Handling with v-on

Explains how Vue's v-on directive (shorthand @) wires DOM and custom component events to handlers, including inline expressions, method handlers, and modifiers.

Fetching Data in Vue

Learn common patterns for fetching data in Vue components and composables, including lifecycle timing, reactivity pitfalls, and race conditions.

Form Input Bindings with v-model

Details how v-model implements two-way binding on form elements and components, what it compiles down to, and its modifiers and pitfalls.

Forms and Validation

Learn how to build validated forms in Vue using v-model, computed validity checks, and patterns for showing timely, non-annoying error feedback.

Handling Loading and Error States

Explore patterns for modeling async status explicitly in Vue components so templates can reliably render loading, error, empty, and success UI.

Lazy Loading and Code Splitting

Covers how to split a Vue application into smaller chunks using dynamic imports for routes and components, reducing initial bundle size and improving load perf…

Lifecycle Hooks in the Composition API

Learn how onMounted, onUpdated, onUnmounted and other lifecycle hook functions let you run code at specific points in a component's life.

List Rendering with v-for

Covers how v-for renders lists and objects in Vue templates, why the key attribute matters, and common performance and correctness pitfalls.

Local Component State Patterns

Explore idiomatic ways to structure a component's own internal reactive state before reaching for external state management like Pinia.

Navigation Guards

Understand how global, per-route, and in-component navigation guards let you control, cancel, or redirect navigation, e.g. for authentication.

Nested Routes

Learn how to compose layouts with parent and child routes so nested UI sections render inside their own router-view outlets.

Pinia Actions and Getters

Learn how Pinia actions encapsulate business logic and mutations while getters derive cached, reactive values from store state.

Pinia Basics

Get started with Pinia, Vue's official state management library, covering stores, state, and how components read and mutate shared data.

Props Explained

Explains how props pass data from parent to child components in Vue, covering declaration, validation, defaults, and the one-way data flow rule.