Vue Cli Update

Posted on  by admin
Warning regarding Previous Versions.

The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

Node Version Requirement. Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended).

You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows.

To install the new package, use one of the following commands.

You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g.

After installation, you will have access to the vue binary in your command line.

You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.
You can check you have the right version with this command:.
0

To upgrade the global Vue CLI package, you need to run:.

Upgrade commands shown above apply to the global Vue CLI installation.

To upgrade one or more @vue/cli related packages (including packages starting with @vue/cli-plugin- or vue-cli-plugin-) inside your project, run vue upgrade inside the project directory:.

First, install the latest Vue CLI globally:.
1

In your existing projects, run:. And then follow the command line instructions.

Note that the migrator is not complete yet and doesn't cover all cases.

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

If you see errors like setup compilation vue-loader-plugin(node:44156) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation after upgrading, please remove the lockfile (yarn.lock or package-lock.json) and node_modules in the project and reinstall all the dependencies.

If you want to migrate manually and gradually, you can run vue upgrade to upgrade a specific Vue CLI plugin.

Satyam PathakSatyam Pathak
5,810

If you need a minimum setup for developing standalone .vue components, please use https://sfc.vuejs.org/ or https://vite.new/vue instead.

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).

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

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);.

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.

webpack-dev-server has been updated from v3 to v4.

So there are breaking changes with regard to the devServer option in vue.config.js.

Please check out the webpack-dev-server migration guide for more details.

C:\Users\Muhammad Abbas\AppData\Roaming\npm\node_modules

The disableHostCheck option was removed in favor allowedHosts: 'all';.

npm install -g @vue/cli

public, sockHost, sockPath, and sockPort options were removed in favor client.webSocketURL option.

IE9 support of the dev server is not enabled by default.

If you need to develop under IE9, please manually set the devServer.webSocketServer option to sockjs. Starting with v5.0.0-beta.0, running vue-cli-service build will automatically generate different bundles based on your browserslist configurations.

The --modern flag is no longer needed because it is turned on by default. Say we are building a simple single-page app with the default setup, here are some possible scenarios:. With the default browserslist target of Vue 2 projects (> 1%, last 2 versions, not dead), vue-cli-service build will produce two types of bundles: One for modern target browsers that support