Tutorials covering Vue.js from fundamentals through advanced patterns. Each chapter follows a consistent structure: intro prose, key point callout, motivation section, detailed walkthroughs with code, a complete example session, quick reference tables, best practices, common pitfalls, real-world examples, ASCII diagrams, and a summary. Topics include template syntax, attribute binding, event handling, conditional and list rendering, computed properties, watchers, component communication, slots, the Composition API, reactivity internals, lifecycle hooks, and ecosystem tooling like Vite, Vue Router, and Pinia. Every chapter uses real, verifiable code with no invented data, and each builds on the previous without cross-contaminating other framework series.
Vapor Mode is not enabled by a single global flag. It is an opt-in compilation target that is selected per component via the vapor attribute on <script setup>, and the application-level entry point determines whether the VDOM runtime is included in the bundle. A component with the attribute compiles to direct DOM operations; a component…
Vapor Mode and Virtual DOM Mode are two distinct rendering engines that can coexist in a single Vue application through the vaporInteropPlugin. The plugin allows Vapor components to be rendered inside VDOM trees and VDOM components to be rendered inside Vapor trees, covering standard props, events, and slots. The interoperability is functional but not seamless:…
Vue’s compiler macros—defineProps, defineEmits, defineModel, defineOptions—are functions that look like runtime imports but are eliminated at compile time and replaced with the equivalent runtime code. The macro system is not closed. The vue-macros project demonstrates that custom macros can be created and shipped as unplugin transformations, and unplugin-vue is the underlying tool that makes a…
The <script setup> block is not a runtime feature. It is a compile-time transformation that rewrites the component’s script and template into a standard setup() function, with binding metadata that drives optimized code generation. The transformation has two distinct modes—inline and function—and the choice between them determines how template expressions are rewritten, how refs are…
Vue’s reactivity system is designed to clean up after itself. When a component unmounts, its effect scope stops, its watchers are disposed, and its reactive dependencies are released. The leaks that remain are almost never Vue’s fault. They are caused by code that creates a resource outside the component’s scope—an event listener on window, a…
A Vue monorepo at scale is not a single tool decision. It is a layered architecture: a package manager that handles dependency resolution and workspace linking, and a build system that handles task orchestration, caching, and affected-project detection. The two layers are independent, and the most common production stack combines pnpm workspaces for the first…
A Vue component library is not an application. The default Vite build treats the project as an app: it reads index.html, bundles every dependency, and produces a deployable website. Library mode changes the build target from a deployable page to a publishable package. The build.lib option in vite.config.ts tells Vite to use the library entry…
TypeScript declarations for a Vue component library are not optional. A consumer that imports MyButton from the library needs to know the shape of its props, the events it emits, and the slots it exposes. Without .d.ts files, the consumer gets any, and the editor’s autocomplete and type checking stop at the import boundary. vue-tsc…
Vue’s template compiler is not a closed pipeline. The transform stage—the phase between parsing the template into an AST and generating the render function—is built from an array of nodeTransforms functions that run on every node, and a map of directiveTransforms that run on specific directives. A custom compiler plugin is a function inserted into…
The mount phase, the render pipeline, and the scheduler queue are three stages of the same mechanism. The mount phase creates the component instance, runs the setup, and executes the render function for the first time. The render pipeline turns the template into a virtual DOM tree and patches it into real DOM nodes. The…