Open-Source Wikis

/

Vue.js

/

vuejs/core overview

/

Getting started

vuejs/core

Getting started

This page explains how to clone, install, build, test, and run Vue core locally. It is for contributors who want to hack on the framework itself, not for application authors. For end-user docs see vuejs.org.

Prerequisites

The repo declares its requirements in two places:

  • package.jsonengines.node requires Node >=20.0.0. The pinned version in .node-version is the one CI runs.
  • package.jsonpackageManager pins pnpm to a specific minor version (currently pnpm@10.33.0). The preinstall script forbids using anything except pnpm via npx only-allow pnpm.

The contributing guide also recommends @antfu/ni so commands can be written as nr build instead of pnpm run build. All examples below use plain pnpm so they work without ni.

Clone and install

git clone https://github.com/vuejs/core.git vue-core
cd vue-core
pnpm install

pnpm install triggers simple-git-hooks via the postinstall script, which sets up the pre-commit and commit-msg hooks. After this, every commit will:

  • Run pnpm lint-staged (Prettier + ESLint on staged files).
  • Run pnpm check (tsc --incremental --noEmit over the whole monorepo).
  • Validate the commit message format via scripts/verify-commit.js against the Angular commit convention.

Build

The repository's build orchestrator is scripts/build.js, run via pnpm build. It supports fuzzy matching package names and a number of flags:

# build everything (only public packages; private ones are skipped)
pnpm build

# build a single package
pnpm build runtime-core

# build all packages whose name matches "compiler"
pnpm build compiler --all

# build with a specific format
pnpm build runtime-core -f esm-bundler

# build with source maps (slower)
pnpm build vue -s

The build pipeline is:

  1. scripts/build.js reads each package's buildOptions from its package.json, then forks a Rollup process per package using the shared rollup.config.js.
  2. scripts/inline-enums.js rewrites const enum references to numeric literals so they survive the esbuild-based transpile pipeline.
  3. After Rollup completes, pnpm build-dts (run separately, not by default) emits .d.ts bundles for each package using rollup-plugin-dts and rollup.dts.config.js.

The Rollup config supports the formats listed in packages/vue/README.md: global, esm-browser, esm-bundler, cjs, plus -runtime variants for the main vue package. pnpm build writes outputs to each package's dist/ directory.

Run in dev mode

scripts/dev.js (run via pnpm dev) bundles a single package in dev mode and watches for changes. It is what most contributors keep open while iterating:

# default: watch packages/vue in global format
pnpm dev

# watch runtime-core in esm-bundler format
pnpm dev runtime-core -f esm-bundler

# watch with sourcemaps (slower)
pnpm dev runtime-core -s

# inline all dependencies (helpful for esm-bundler debugging)
pnpm dev runtime-core -if esm-bundler-runtime

The output (e.g., packages/vue/dist/vue.global.js) is dev-only and not safe to publish.

SFC Playground

pnpm dev-sfc

This launches the SFC Playground (packages-private/sfc-playground) at http://localhost:5173 (Vite default). It is wired to the local source so any change in packages/compiler-sfc, runtime-core, etc., shows up immediately. This is the fastest reproduction loop for SFC bugs.

Template Explorer

pnpm dev-compiler

This watches packages-private/template-explorer at http://localhost:3000. It shows the AST and generated code side-by-side and is the right tool when working on compiler-core or compiler-dom transforms.

Test

pnpm test proxies to Vitest (vitest.config.ts). All Vitest CLI flags are supported.

# watch mode for the whole repo
pnpm test

# run once and exit
pnpm test run

# run all tests in a package
pnpm test runtime-core

# run tests by file name pattern
pnpm test renderer

# run a specific test name within matching files
pnpm test renderer -t "should mount component"

Vitest splits work into projects:

  • unit projects run against source code (fast, no build needed).
  • e2e project runs vue.global.js in a real browser (jsdom + puppeteer); use pnpm test-e2e.
  • dts-test runs after pnpm build-dts and verifies the generated .d.ts files via packages-private/dts-test/tsconfig.test.json.

For coverage:

pnpm test-coverage

Coverage is also published continuously at https://coverage.vuejs.org.

Type-check, lint, format

# type-check the whole monorepo (also runs in pre-commit)
pnpm check

# lint with ESLint (cached)
pnpm lint

# format with Prettier
pnpm format

# verify formatting without changes (CI uses this)
pnpm format-check

Cleaning

pnpm clean

Removes every packages/*/dist, the global temp/ folder, and the ESLint cache. Use this before re-running pnpm build-dts if .d.ts generation gets into a bad state.

Built by Factory AutoWiki from public repository content. It is a generated preview for codebase exploration, not source-maintained documentation.

Getting started – Vue.js wiki | Factory