vue

Active contributors: Evan You, edison, daiwei

Purpose

The vue package is the public-facing one — what users npm install vue for. Its source is tiny (~150 lines, 3 files) because it does no heavy lifting itself; it composes @vue/compiler-dom and @vue/runtime-dom into a single bundle and registers the compiler so the runtime knows how to compile templates passed to it as template: '...'.

This package owns the build matrix: vue.global.js, vue.runtime.global.js, vue.esm-browser.js, vue.esm-bundler.js, vue.runtime.esm-bundler.js, and the .prod.js and .cjs.js variants. The README in packages/vue/README.md is the canonical guide to which file to use when.

Directory layout

packages/vue/
├── package.json
├── index.js / index.mjs    # tiny stubs that re-export ./dist/...
├── jsx-runtime/            # JSX runtime stubs for "jsx": "react-jsx" pragma
├── jsx.d.ts
├── server-renderer/        # subpath export for `vue/server-renderer`
├── compiler-sfc/           # subpath export for `vue/compiler-sfc`
├── examples/               # HTML examples used by the e2e tests
└── src/
    ├── index.ts            # full build entry: registers compileToFunction
    ├── runtime.ts          # runtime-only entry (no compiler)
    └── dev.ts              # __DEV__ helpers

Key code

packages/vue/src/index.ts is what the "full build" runs. It imports compile from @vue/compiler-dom, defines compileToFunction, and calls registerRuntimeCompiler(compileToFunction) so any component using template: '...' is compiled at runtime:

function compileToFunction(template, options) {
  // resolve `#id` selectors, look up cache
  const { code } = compile(template, extend({
    hoistStatic: true,
    onError: __DEV__ ? onError : undefined,
    …
  }, options))

  const render = (
    __GLOBAL__ ? new Function(code)() : new Function('Vue', code)(runtimeDom)
  ) as RenderFunction
  ;(render as InternalRenderFunction)._rc = true
  return (compileCache[key] = render)
}

registerRuntimeCompiler(compileToFunction)

A compileCache keyed by genCacheKey(template, options) deduplicates repeat compilations of the same template — common when many component instances share a template string.

packages/vue/src/runtime.ts is the runtime-only entry that simply re-exports @vue/runtime-dom without registering the compiler. Templates that haven't been pre-compiled will warn at runtime.

The dev.ts file emits the dev-build feature-flag warning if a bundler did not replace __VUE_OPTIONS_API__ and friends.

Subpath exports

package.json declares subpath exports so users can import deeper than the main entry:

• vue — the runtime + compiler full build (or runtime-only depending on bundler resolution).
• vue/server-renderer — re-export of @vue/server-renderer.
• vue/compiler-sfc — re-export of @vue/compiler-sfc.
• vue/jsx-runtime and vue/jsx-dev-runtime — for the new JSX transform.
• vue/dist/* — escape hatch for users who need a specific build file.

Build matrix

Configured in package.json#buildOptions. Every format gets dev and prod variants. The README enumerates them:

• vue.global.js / vue.global.prod.js — IIFE for <script> use. Inlines all internal packages.
• vue.runtime.global.js — runtime-only IIFE (no compiler).
• vue.esm-browser.js / vue.esm-browser.prod.js — native ES modules in the browser.
• vue.runtime.esm-browser.js — runtime-only native ES modules.
• vue.esm-bundler.js — full build for bundlers (preserves process.env.NODE_ENV checks).
• vue.runtime.esm-bundler.js — runtime-only bundler entry. This is the default module field; bundlers pick it up unless aliased. Templates must therefore be precompiled.
• vue.cjs.js / vue.cjs.prod.js — Node SSR.

Examples

packages/vue/examples/ contains HTML files that are run end-to-end against vue.global.js by the e2e Vitest project. Examples include commits/, markdown/, todomvc/, tree/, and a transition gallery — minimal apps that exercise the full system without bundlers.

Integration points

• Aggregates compiler-dom + runtime-dom. Re-exports everything so import { ref } from 'vue' lands in runtime-core via runtime-dom.
• The runtime calls registerRuntimeCompiler here; without this call (i.e., in runtime-only builds), passing template: '...' warns.
• Bundlers determine which file is loaded via the package.json field hierarchy: module (esm-bundler runtime), main (cjs), unpkg/jsdelivr (global prod).

Entry points for modification

• New build format? Edit packages/vue/package.json buildOptions.formats, then rollup.config.js may need a matching branch.
• New subpath export? Add directory + package.json re-export, plus the matching alias in scripts/aliases.js.
• New runtime-compile feature flag? Edit compileToFunction in src/index.ts.