Vue

JavaScript / Updated 02 Sep 2025 / 3 min read

Understanding Watchers in Vue 3

Vue 3 watchers let you run side-effect logic when reactive data changes. They are useful for tasks such as triggering an API request, synchronizing with an external system, persisting state, or responding to a transition between values. 1. What Is a Watcher? A watcher observes one or more reactive sources and runs a callback when their values change. Unlike a computed property, which represents derived state, a watcher is usually intended for side effects.

Vue Array

JavaScript / Updated 02 Sep 2025 / 3 min read

Understanding Computed Properties in Vue 3

Vue 3’s reactivity system makes it easy to derive values from reactive state. A computed property is a value that Vue automatically recalculates when its reactive dependencies change and caches between updates when those dependencies stay the same. 1. What Is a Computed Property? Computed properties are designed for derived state. Instead of storing both source data and a duplicated calculated value, you define how the value should be computed from its dependencies.

Vue

JavaScript / Updated 02 Sep 2025 / 2 min read

Two-Way Binding with `v-model` in Vue 3

Two-way binding is a common part of interactive Vue applications. In Vue 3, v-model provides a concise way to synchronize form controls with component state. This guide covers the basic syntax, common input types, custom components, and a few practical guidelines. 1. What Is Two-Way Binding? Two-way binding keeps a UI control and JavaScript state synchronized. When the user changes an input, the state updates; when the state changes, the rendered input reflects the new value.

Vue

JavaScript / Updated 02 Sep 2025 / 3 min read

State Management in Vue 3 with Pinia

Effective state management becomes increasingly important as a Vue application grows. Pinia is the recommended state-management library for Vue and provides a compact API, strong TypeScript support, and good integration with the Composition API. This guide covers the basic setup and the core concepts of state, getters, and actions. 1. What Is Pinia? Pinia is a state-management library designed for Vue applications. Compared with older Vuex patterns, it generally offers:

Vue

JavaScript / Updated 02 Sep 2025 / 3 min read

Sending Data from a Child Component to Its Parent in Vue 3

Component communication is a fundamental part of Vue 3 applications. Parents usually pass data down through props, while children send information upward by emitting events. For values that represent a two-way component model, Vue also provides the v-model component contract. 1. Why Child-to-Parent Communication Matters Common examples include: A form field component informing its parent that a value changed. A list item notifying its parent that the user selected or removed it. A reusable control reporting an action such as submit, close, or confirm. Keeping this communication explicit helps components remain reusable and easier to test.

Vue

JavaScript / Updated 02 Sep 2025 / 3 min read

Making API Requests in Vue 3 with Axios

HTTP APIs are a core part of modern web applications. In Vue 3, Axios is a popular HTTP client that provides a convenient API for making requests, configuring defaults, and handling responses and errors. This tutorial demonstrates common CRUD-style requests against the public DummyJSON example API. 1. Install and Configure Axios Install Axios: npm install axios You can configure a reusable Axios instance instead of modifying global defaults:

Vue