Vue

Vue (published to npm as vue, developed at github.com/vuejs/core) is a progressive JavaScript framework for building user interfaces on the web. It layers an approachable, template-driven core for simple pages on top of a fully typed Composition API for scaling up to large single-page applications, and it can be adopted incrementally — dropped into a page via a script tag or driven through a full build pipeline with single-file components.

The framework ships as a coordinated monorepo of packages: a standalone fine-grained reactivity system, a template compiler that produces optimized render functions, a platform-agnostic virtual-DOM runtime, and a server-renderer for SSR/SSG. Official companion libraries (Vue Router, Pinia, Vite tooling) extend it into a complete application stack without pulling third-party routing or state management into the core.

What You Get

• A fine-grained reactivity system (reactive(), ref(), computed(), watch()) that tracks dependencies at the property level via Proxies, so only the DOM that actually changed re-renders.
• Single-file components (.vue) compiled by @vue/compiler-sfc, combining template, script (Options API or <script setup> Composition API), and scoped styles in one file with full TypeScript inference.
• A platform-agnostic virtual-DOM runtime (runtime-core + runtime-dom) with a createApp() API for plugins, mixins, directives, provide/inject dependency injection, and lifecycle hooks.
• First-class server-side rendering and hydration via @vue/server-renderer, plus a template compiler that emits highly optimized render functions with static hoisting and patch-flag diffing.
• An official ecosystem — Vue Router for navigation, Pinia for state management, and Vite-based tooling — maintained alongside the core so routing and state aren’t left to the community to standardize.

Common Use Cases

• Building single-page applications with client-side routing and centralized state, using Vue Router and Pinia alongside the core reactivity and component model.
• Progressively enhancing server-rendered pages by mounting Vue components into specific DOM elements without a full SPA build pipeline.
• Server-side rendering and static site generation for content-heavy or SEO-sensitive sites, via @vue/server-renderer or meta-frameworks like Nuxt that build on Vue core.
• Authoring reusable, typed UI component libraries with <script setup> and the Composition API for consumption across multiple applications.

Under The Hood

Architecture Vue Core is organized as a pnpm monorepo of tightly coupled packages under packages/: reactivity implements fine-grained dependency tracking through Proxy-based reactive()/ref() and a doubly-linked-list subscriber graph in effect.ts; compiler-core/compiler-dom/compiler-sfc/compiler-ssr parse templates into an AST (parser.ts, ast.ts) and transform/codegen them into render functions, with compiler-sfc additionally handling <script setup> compilation and scoped CSS; runtime-core/runtime-dom/runtime-test implement a platform-agnostic virtual-DOM renderer, component instance lifecycle, and the public createApp() API in apiCreateApp.ts; server-renderer renders component trees to HTML strings/streams for SSR; and shared holds cross-package utilities. The runtime consumes compiler output and reactivity effects together — component re-renders are scheduled reactive effects (scheduler.ts) triggered when tracked reactive state changes.

Tech Stack The codebase is ~97% TypeScript, built with Rollup (rollup.config.js, rollup.dts.config.js for bundled .d.ts output), tested with Vitest across unit, e2e, and browser projects, linted with ESLint and formatted with Prettier, and enforces both via simple-git-hooks + lint-staged pre-commit checks and a commit-message validator (verify-commit.js). The workspace is managed by pnpm 11 across 12 packages, with releases cut through a custom scripts/release.js and changelog generated via conventional-changelog.

Code Quality The repo carries 206 test files and roughly 3,962 individual test cases colocated under each package’s __tests__ directory, covering reactivity edge cases, compiler output snapshots, and runtime DOM behavior. Core internals like effect.ts use documented bitflag enums (EffectFlags) and a linked-list Subscriber/Link structure with JSDoc explaining the tracking algorithm, and public-API files follow a consistent apiXxx.ts naming convention that makes the framework’s exported surface easy to audit.

API Design Vue exposes two complementary authoring styles from the same runtime: the Options API (data/computed/methods, defined in componentOptions.ts) for approachable, self-contained components, and the Composition API (apiComputed.ts, apiWatch.ts, apiInject.ts, apiSetupHelpers.ts) for composing and reusing stateful logic across components, both fully typed through defineComponent/defineProps generics. A minimal app only needs createApp(App).mount('#app'), and <script setup> SFCs let compiler-sfc infer prop and emit types with almost no boilerplate.