50 cards
Vue.js is a progressive JavaScript framework designed primarily for building user interfaces. Its progressive nature means it can be adopted incrementally, allowing developers to use as much or as little of the framework as their project requires, and it focuses on the view layer so it can be integrated smoothly with o...
Vue offers two main API styles for organizing component logic. The traditional Options API organizes code into predefined options such as data() for reactive state, methods for functions, computed for derived values, watch for side effects, and lifecycle hooks like mounted(). This approach is intuitive for newcomers be...
Vue's template directives are special attributes that add reactive behavior to the rendered DOM. The v-if directive conditionally renders an element, completely destroying and recreating it in the DOM whenever the condition toggles, and it can be paired with v-else-if and v-else for multiple branches. By contrast, v-sh...
Computed properties are cached reactive derivations that automatically track the reactive values they read. When any of those dependencies change, the computed value is invalidated and recomputed on next access; otherwise, the cached result is returned. In the Composition API, you create one with the computed() functio...
Every Vue component goes through a series of lifecycle stages, and Vue exposes hooks that fire at key moments. In the Composition API these are functions like onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted. The onMounted hook fires after the component has been added to the DOM, ma...
Slots are how a parent component passes template content into designated areas of a child component. The child simply renders slot, and any content placed between the child's opening and closing tags is rendered there. When a component needs multiple insertion points, named slots allow the parent to target specific out...
For applications whose state spans many components, Vue's official state management library is Pinia, which replaced Vuex as the recommended solution. Pinia is intentionally simple: there are no separate mutations, every store supports full TypeScript inference, and stores can be written in either the Options style or...
Vue Router is the official routing library for Vue.js, and it enables single-page application navigation by mapping URL paths to components. It supports nested routes for hierarchical layouts, dynamic route matching with parameters, named routes and views, and navigation guards for controlling access. The library can o...