# Migrate from v4

First, install the latest Vue CLI globally:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# Upgrade All Plugins at Once

In your existing projects, run:

vue upgrade

And then follow the command line instructions.

See the following section for detailed breaking changes introduced in each package.


# One-By-One Manual Migration

If you want to migrate manually and gradually, you can run vue upgrade <the-plugin-name> to upgrade a specific Vue CLI plugin.


# Breaking Changes

# For All Packages

  • Drop support of Node.js 8, 11, 13
  • Drop support of NPM 5

# The vue Command (The Global @vue/cli Package)

The instant prototyping functionalities (opens new window) are removed. Now the vue serve / vue build commands are aliases to npm run serve / npm run build, which in turn execute the scripts specified in the project package.json.

If you need a minimum setup for developing standalone .vue components, please use vite (opens new window) instead.

# @vue/cli-service

# Webpack 5

We've upgraded the underlying webpack version to 5. There are plenty of breaking changes underlyingly, listed in the release announcement page Webpack 5 release (2020-10-10) (opens new window).

Besides the internal changes that are only noticeable for custom configurations, there're several notable changes for user-land code too:

  1. Named exports from JSON modules are no longer supported. Instead of import { version } from './package.json'; console.log(version); use import package from './package.json'; console.log(package.version);
  2. Webpack 5 does no longer include polyfills for Node.js modules by default. You shall see an informative error message if your code relies on any of these modules. A detailed list of previously polyfilled modules is also available here (opens new window).

# Opt Out to Webpack 4

Considering many ecosystem packages haven't catched up yet, we provided a plugin to opt out to webpack 4 for easier migration.

It's as simple as running

vue add webpack-4

at the project root.

Underlyingly, it uses the resolutions (opens new window) field for Yarn and PNPM users, and module-alias (opens new window) for NPM users.

Though both work in all our tests, please be aware that the module-alias approach is still considered hacky, and may not be as stable as the "resolutions" one.

# Underlying Loaders and Plugins

# ESLint Plugin

# PWA Plugin

# TypeScript Plugin

# E2E-Cypress Plugin

# Unit-Jest Plugin

# Unit-Mocha Plugin

# Internal Packages

# @vue/cli-shared-utils