Tooling

This page covers the build, lint, and CI tooling that surrounds the Vue codebase. The runtime user only sees vue on npm; what produces it is a fairly elaborate Rollup + esbuild + custom-script pipeline.

Build orchestrator: scripts/build.js

Entry point: pnpm build → node scripts/build.js [filter] [flags].

Responsibilities:

1. Walk packages/*/package.json and packages-private/*/package.json. Skip private packages by default. If --all is passed, include them.
2. Apply the fuzzy filter so pnpm build runtime builds every package whose name matches.
3. Fork a Rollup process per package using rollup.config.js. The config reads each package's buildOptions.formats and produces one bundle per format (global, esm-browser, esm-bundler, cjs, with -runtime and .prod variants for the main vue package).
4. After Rollup completes, optionally run scripts/inline-enums.js to rewrite const enum references into numeric literals.

Useful flags:

• -f <format> — restrict to one format. pnpm build runtime-core -f esm-bundler.
• -d — generate .d.ts (forwards to pnpm build-dts).
• -s / --sourcemap — emit source maps. Slower; useful for debugging the built output.
• -t / --types — alias for the dts pipeline.
• --prodOnly / --devOnly — skip the other variant.

scripts/utils.js and scripts/aliases.js provide shared helpers and the package-name → source-path map that Rollup, Vitest, and TypeScript all consume.

Type bundling: scripts/build-dts

pnpm build-dts runs:

1. tsc -p tsconfig.build.json --noCheck — emit raw .d.ts files into temp/packages/*/src/....
2. rollup -c rollup.dts.config.js — bundle each package's raw .d.ts files into a single dist/<pkg>.d.ts using rollup-plugin-dts.

The two-step process is necessary because tsc --emitDeclarationOnly cannot bundle declarations across files; rollup-plugin-dts does.

After this completes, pnpm test-dts-only validates the bundled types against packages-private/dts-test/.

Dev mode: scripts/dev.js

pnpm dev [pkg] [flags] is a faster, esbuild-based watcher. Differences from the production build:

• Uses esbuild directly, not Rollup. Much faster rebuilds.
• Always emits dev mode (__DEV__ === true).
• Always emits source maps when -s is passed.
• Supports -i / --inline-deps to bundle all @vue/* deps into one file. Useful for ESM-bundler debugging.

Output is dev-only and not safe to publish. The contributing guide explicitly warns against using pnpm dev output as a substitute for pnpm build.

Other scripts

• scripts/inline-enums.js — rewrites const enum references to numeric literals after Rollup runs. Driven by --enums flag in the build.
• scripts/usage-size.js and scripts/size-report.js — compute gzip/brotli sizes of dist/*.prod.js and write JSON for the size-data CI workflow.
• scripts/verify-treeshaking.js — sanity-checks that dev-only code does not leak into prod bundles by greppng for known-dev tokens.
• scripts/verify-commit.js — the regex-based commit-message validator wired into the commit-msg git hook.
• scripts/release.js — the release driver. Bumps every package version, regenerates CHANGELOG.md, tags, and creates the GitHub release.
• scripts/setup-vitest.ts — Vitest global setup. Installs __DEV__, __BROWSER__, etc. so source files can run unmodified inside tests.
• scripts/pre-dev-sfc.js — ensures CJS builds exist before pnpm dev-sfc boots the playground.

Workspace and deps

• pnpm-workspace.yaml lists the workspaces (packages/*, packages-private/*).
• The catalog: notation in package.json (e.g., "@babel/parser": "catalog:") refers to the pnpm-workspace.yaml catalog block, which centralizes shared dep versions across the workspace.
• Renovate configuration lives at .github/renovate.json5 and drives automated dependency PRs.

CI

Workflows under .github/workflows/:

File	Purpose
ci.yml	pnpm check, pnpm lint, pnpm format-check on every push/PR.
test.yml	Vitest matrix: unit, unit-jsdom, e2e, dts. Matrix runs across Node 20 on Linux/macOS/Windows for the unit projects.
size-data.yml	Builds and stores the size baseline on every push to main.
size-report.yml	On PRs, diffs against the stored baseline and posts a comment.
autofix.yml	Auto-applies Prettier fixes when the format check fails.
release.yml	Publishes to npm and GitHub when a tagged release is pushed.
ecosystem-ci-trigger.yml	Triggers vuejs/ecosystem-ci to run downstream tests against Nuxt, Quasar, etc. Comment /ecosystem-ci run on a PR to invoke.
lock-closed-issues.yml	Locks issues two weeks after they close.
close-cant-reproduce-issues.yml	Closes "can't reproduce" issues after a delay.

Most workflows are pinned to specific action versions and use pnpm/action-setup with the version pulled from package.json#packageManager.

Linting and formatting

• eslint.config.js is a flat-config ESLint setup using typescript-eslint and @vitest/eslint-plugin. The lint script caches via .eslintcache.
• .prettierrc and .prettierignore define formatting; only .{js,json,ts,tsx} are formatted in lint-staged.
• lint-staged configuration lives in package.json. The pre-commit hook runs pnpm lint-staged followed by pnpm check.

VS Code recommendations

.vscode/settings.json sets up Volar (Vue language tooling) for the SFC playground and template explorer, plus Prettier on save. .vscode/extensions.json recommends Volar, ESLint, and Prettier extensions to new contributors.