Vue.js · Frontend

Vue 3.6 Swaps Rollup for Rolldown and Adopts Vite Plus in a Full Toolchain Overhaul

By VaJoy · Jul 13, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Framework maintainers who still juggle Rollup, esbuild, and a patchwork of npm scripts can see a concrete, working alternative where one Rust bundler handles every build target and one config file drives the entire developer workflow.

Summary

Vue 3.6's beta toolchain drops Rollup and esbuild for the Rust-based Rolldown bundler and adopts Vite Plus for linting, formatting, and Git hooks. A walkthrough of the new monorepo build scripts, macro-based environment stripping, and automated release pipeline shows how the framework now targets seven output formats from a single Rolldown-driven codebase.

The migration centers on a pnpm monorepo where each package declares its own build formats via a `buildOptions` field. A custom `scripts/build.js` parses CLI flags to drive Rolldown, replacing macro constants like `__DEV__` at the AST level to produce separate development and production artifacts for CJS, ESM bundler, ESM browser, and IIFE global builds. Type declarations are generated by oxc's isolated-declaration transformer and then bundled with `rolldown-plugin-dts`.

Developer tooling is consolidated under Vite Plus: a single `vite.config.ts` controls lint rules, formatting preferences, staged pre-commit hooks, and Vitest test globals. The release script uses `semver` and `enquirer` for interactive version bumping, runs `conventional-changelog`, and publishes all workspace packages to npm with automatic tag assignment and rollback on failure.

Takeaways

— Rolldown replaces both Rollup and esbuild for all Vue 3.6 builds, including the dev watch mode that previously required esbuild.

— Vite Plus unifies linting, formatting, staged Git hooks, and Vitest configuration in a single `vite.config.ts` file.

— Each monorepo package declares its required output formats (cjs, esm-bundler, esm-browser, global) in a `buildOptions` field inside its own `package.json`.

— Macro constants like `__DEV__` are replaced at the AST level via Rolldown's `transform.define`, keeping the ESM bundler build as a single file that downstream tools tree-shake.

— Type declarations are generated per-file by oxc's `isolatedDeclaration`, then bundled into one `.d.ts` per package using `rolldown-plugin-dts`.

— The release script uses `semver` for version calculation, `enquirer` for interactive prompts, and `conventional-changelog` for automated changelog generation.

— An error handler in the release script reverts all package versions to their originals if the publish step fails, preventing version drift.

Conclusions

Rolldown's module graph is designed as a long-lived first-class citizen, which is what lets a single tool handle both one-shot production builds and persistent dev watch mode — a capability Rollup's architecture never supported.

Offloading correctness lint rules to `tsc --noEmit` and disabling them in the faster linter is a pragmatic split that avoids duplicating type-level checks while keeping formatting and style rules fast.

Using `workspace:*` in monorepo dependencies and letting pnpm resolve the actual version at publish time eliminates the manual version-bumping chore that plagues many multi-package projects.

The `externalLiveBindings: false` setting is a small but meaningful optimization: it prevents Rolldown from wrapping re-exports in `Object.defineProperty` getters, shrinking CJS output with no runtime downside for a framework like Vue.

Concepts & terms

Rolldown

A Rust-based JavaScript bundler that provides Rollup-compatible APIs with faster builds and a module graph designed for both one-shot and incremental watch builds.

Vite Plus

A tool built on top of Vite that adds integrated linting, formatting, Git hooks, and test running, all configurable through a single `vite.config.ts` file.

Macro constants (e.g., __DEV__)

Placeholder identifiers in source code that build tools replace with environment-specific values at compile time, enabling dead-code elimination of development-only branches in production builds.

isolatedDeclaration

An oxc API that generates a `.d.ts` file from a single TypeScript source file without needing full project type-checking, enabling fast per-file declaration generation in monorepos.

workspace protocol (workspace:*)

A pnpm dependency protocol that resolves a package from the local monorepo workspace instead of a remote registry, with the real version number filled in automatically at publish time.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗