Tooling

Vue.js offers a comprehensive tooling ecosystem to streamline development, from build systems to testing frameworks. This guide covers the essential tools and configurations used in Vue projects.

Build System

Package Manager

Vue core uses pnpm as its package manager (version 10.30.2). The project enforces this with a preinstall hook:

{
  "packageManager": "[email protected]",
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  }
}

Build Scripts

The Vue core repository includes several build scripts in the scripts/ directory:

Development Build

npm run dev
# or for specific packages
npm run dev -- runtime-dom

The dev.js script supports:

Watch mode for automatic rebuilds
Multiple format outputs (ESM, CJS, global)
Source maps
Development-only builds

Production Build

npm run build
# or for specific packages with formats
npm run build -- core --formats cjs

The build.js script provides:

Parallel builds using all CPU cores
Multiple output formats
Size reporting (min, gzip, brotli)
TypeScript declaration generation
Rollup-based bundling

Build Configuration

Output Formats

Vue supports multiple build formats:

esm-bundler: For bundlers like Vite and webpack
esm-browser: For native ES module imports in browsers
cjs: CommonJS for Node.js
global: IIFE for direct <script> tag usage

Build Options

Packages define build options in their package.json:

{
  "buildOptions": {
    "name": "VueCompilerSFC",
    "formats": ["cjs", "esm-browser"],
    "prod": false,
    "enableNonBrowserBranches": true
  }
}

Development Environment

Node.js Version

Vue requires Node.js 20.0.0 or higher:

{
  "engines": {
    "node": ">=20.0.0"
  }
}

TypeScript Configuration

Vue uses TypeScript 5.6.2 with strict type checking:

npm run check  # Type checking without emit
npm run build-dts  # Generate declaration files

Git Hooks

The project uses simple-git-hooks for pre-commit and commit message validation:

{
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged && pnpm check",
    "commit-msg": "node scripts/verify-commit.js"
  }
}

Lint-Staged

Automatic formatting and linting on commit:

{
  "lint-staged": {
    "*.{js,json}": ["prettier --write"],
    "*.ts?(x)": [
      "eslint --fix",
      "prettier --parser=typescript --write"
    ]
  }
}

Code Quality Tools

ESLint

Vue uses ESLint 10.0.2 with custom configurations:

npm run lint  # Lint all files
npm run lint -- --fix  # Auto-fix issues

Prettier

Consistent code formatting:

npm run format  # Format all files
npm run format-check  # Check formatting

Bundlers

Rollup

Vue core uses Rollup 4.59.0 for building packages with plugins:

@rollup/plugin-alias - Module aliasing
@rollup/plugin-commonjs - CommonJS to ES6
@rollup/plugin-json - JSON imports
@rollup/plugin-node-resolve - Node module resolution
@rollup/plugin-replace - String replacement
rollup-plugin-esbuild - Fast transpilation with esbuild

Vite

Recommended for Vue applications:

npm create vue@latest  # Create new Vite-powered project

Vite provides:

Lightning-fast HMR
Optimized builds
Built-in SFC support with @vitejs/plugin-vue
TypeScript support out of the box

Development Workflows

SFC Playground

Local development environment for testing SFCs:

npm run dev-sfc

This starts:

Multiple watch processes for different packages
Vite dev server for the playground
Hot reload for all changes

Template Explorer

Visual tool for exploring template compilation:

npm run dev-compiler

Size Analysis

Monitor bundle sizes:

npm run size  # Build and report sizes

Outputs min, gzip, and brotli sizes for all packages.

Performance Tools

Benchmarking

Vitest-based benchmarks:

npm run bench  # Run benchmarks
npm run bench-compare  # Compare with previous run

Bundle Analysis

The build system automatically reports sizes:

runtime-dom.global.prod.js min:92.5kB / gzip:35.2kB / brotli:31.8kB

SFC Tooling Integration

Vite Plugin

Official Vite plugin for Vue SFCs:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue()]
})

Webpack Loader

For webpack-based projects:

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

IDE Support

Volar

Official VS Code extension for Vue:

TypeScript support in SFCs
Template type checking
Auto-completion
Error diagnostics

Language Server

Vue Language Server provides IDE features:

npm install -g @vue/language-server

Release Process

Automated release workflow:

npm run release

This script:

Prompts for version bump
Runs tests
Builds all packages
Updates package.json files
Creates git tags
Generates changelog
Publishes to npm

Changelog Generation

npm run changelog

Uses conventional-changelog with Angular preset.

CI/CD Considerations

Parallel Builds

The build system automatically parallelizes builds across CPU cores:

await runParallel(cpus().length, targets, build)

Tree-Shaking Verification

node scripts/verify-treeshaking.js

Ensures production builds are properly tree-shakeable.

Custom Scripts

Usage Size

Measures real-world usage size:

node scripts/usage-size.js

Enum Inlining

Optimizes TypeScript enums:

node scripts/inline-enums.js

Getting Started

Essentials

Components In-Depth

Reusability

Built-in Components

Scaling Up

​Tooling

​Build System

​Package Manager

​Build Scripts

​Development Build

​Production Build

​Build Configuration

​Output Formats

​Build Options

​Development Environment

​Node.js Version

​TypeScript Configuration

​Git Hooks

​Lint-Staged

​Code Quality Tools

​ESLint

​Prettier

​Bundlers

​Rollup

​Vite

​Development Workflows

​SFC Playground

​Template Explorer

​Size Analysis

​Performance Tools

​Benchmarking

​Bundle Analysis

​SFC Tooling Integration

​Vite Plugin

​Webpack Loader

​IDE Support

​Volar

​Language Server

​Release Process

​Changelog Generation

​CI/CD Considerations

​Parallel Builds

​Tree-Shaking Verification

​Custom Scripts

​Usage Size

​Enum Inlining

​Resources

Build docs developers (and LLMs) love