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…

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…

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…

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…

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 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…

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:…

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 is Vue’s second compilation target. The default Vue compiler produces code that creates VNodes, and the runtime diffs those VNodes to determine what changed. Vapor Mode skips both steps: the template compiler analyzes the template at build time and emits JavaScript that creates DOM nodes directly and binds reactive effects to the specific…