What's new in Vue CLI 5.0?

Vue CLI 5 is out!✨

It’s a notable release, as it will probably be the last major version, as Vue CLI is now officially in maintenance mode. The recommended tool to create and build Vue projects is now create-vue, which is based on Vite 🚀.

As usual, you can run vue upgrade to upgrade your CLI project to this new version. If you want to upgrade to v5 without pain (or to any other version, by the way), I have created a Github project to help: vue-cli-diff. Choose the version you’re currently using (4.5.12 for example), and the target version (5.0.1 for example), and it gives you a diff of all files created by the CLI: vue-cli-diff/compare/4.5.12…5.0.1. It can be a great help along with the official vue upgrade command. You have no excuse for staying behind anymore!

The last major release of the CLI was in October 2019. This new release brings a ton of new features and the stable support for Vue 3 😍

Let’s dig into the most notable changes!

Webpack 5

The CLI team worked hard to make the CLI compatible with Webpack v5. It now uses the latest Webpack version, and a bunch of related plugins have been updated to the latest version as well. Note that NodeJS v10 is no longer supported.

TypeScript

The TS plugin has been updated to use the latest underlying Webpack plugins. The latest TS version (currently v4.5) is of course supported, and the minimal version is now v3.6.

Note that pure JavaScript project generated with the CLI will now have a jsconfig.json file, roughly the same as the tsconfig.json file that the TypeSCript projects have, which helps the IDE plugins like Vetur or Volar.

As TSLint is now deprecated, the TSLint support has been removed.

ESlint

As the TSLint support is now deprecated, ESLint is becoming the recommended option. The CLI has been updated to support the recently released ESLint v8. A new option has been added to the plugin, allowing to specify an output file for the ESLint results with --output-file:

yarn lint --format json --output-file results.json

Note that the @vue/eslint-config-prettier ESLint plugin has been deprecated, and can be replaced with the official eslint-config-prettier plugin.

Jest

The Jest unit test plugin now uses Jest v27, and Jest now needs to be specified as a peer dependency. I’m happy with this one, as I’m the one who landed the PR to support it 😉. Note that you’ll need to use @vue/vue2-jest or @vue/vue3-jest to use this new version, instead of vue-jest. If you use TypeScript as well, you’ll also need to add ts-jest to your dependencies. I explained how to migrate in this tweet if you’re curious. It should be faster than the previous version of the plugin that used Jest v24 (which was 3 years old).

Cypress

My favorite e2e testing tool can now be used in its latest version in CLI v5. It used to be a bit painful, as the CLI v4 was depending on Cypress v3 directly (a quite old version). Cypress is now a peer dependency of the plugin, so we can specify the version explicitly in our package.json, and use the shiny new Cypress versions as soon as they are out \o/.

Vue config

The vue.config.js file is now generated by the CLI with a defineConfig wrapper function, allowing to have better help from the IDE for the available options:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack: {
    // ...
  }
})

It is now also possible to write your CLI configuration file using an ESM module, if you name it vue.config.mjs.

Modern build

The “modern” build mode already existed in previous CLI versions. It produces 2 versions of your application: a modern one, targeting modern browsers that support ES Modules, and a legacy one, targeting older browsers (if you target browsers in your browserslist config that don’t support ES Modules). If you only target modern browsers, the modern build will now only generate one version of the application, using ES Modules. By default, a new Vue 3 project generated with the CLI no longer targets IE11.

You no longer need to specify --modern to enable the modern mode when building your application: this is done by default in CLI v5. Note that a --no-module option is now available if you want to opt out of this behavior.

Minify with esbuild or swc

If you like fine-tuning the build process, you’ll be happy to know you can now customize the minifier used by the CLI. You can choose between terser (the default), uglifyJs, esbuild, or swc. For example, to use esbuild, you can install it as a dependency, and add the following configuration in vue.config.js:

defineConfig({
  terser: {
    minify: 'esbuild',
    terserOptions: {
      // can be whatever esbuild options you want, despite the name
    }
  }
});

The build time and package sizes can vary depending on what minifier and option you picked, so give it a try to find what’s best for you.

If you are looking for a perfect setup for a Vue 3/TypeScript application, check out our online workshop: the first exercises are free, and they’ll teach you how to set up the application with Vite and build your first Vue 3 components 🤗.

All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!



blog comments powered by Disqus