What You Need to Know about Vue CLI 3

Learn about the new features of Vue CLI 3 and how you can benefit from upgrading today.

Vue CLI, the standard build toolchain for Vue applications, got a new major release (v3) a couple of weeks ago. In this article we will review some of the major features and why it’s so important.

This past February, during the conference keynote at Vue.js Amsterdam, Evan You talked about Vue CLI 3 and addressed the issues of the good old Vue CLI 2. He talked about the CLI’s future and how it can help improve the development experience — having in mind what developers need: performance, ease of use, and minimum configuration.

So the new version was delivered to help developers work faster and solve some problems that previous versions had.

The goals were to:

This means that with Vue CLI 3 you don’t have to worry, for example, about the webpack configuration unless you need to. Here you might think that with Vue CLI 2 templates the configuration was there and you still didn’t need to make changes. That’s right, but the configuration file was living in your source code. In the new version, the configuration is upgradable while it remains fully configurable.

Evan You published a detailed announcement explaining the reasons behind this huge update and what has changed on The Vue Point. In this article, we will review what these new features really mean and how you can take advantage of them.

Upgradable

The new CLI consists of a collection of node modules that you can update any time. This means that now Vue CLI won’t publish its files in your source code, so you won’t have the burden of keeping them up to date. 

If you’ve heard the term “eject” before, it describes the functionality of a tool that puts the configuration or other internal files in your project. The downside of this is that once you eject, you are on your own and won’t be able to upgrade to a newer version of the tool in the long run. 

It’s important to know that your new project will still be fully configurable.

For third party integrations like Babel, TypeScript, and PostCSS, Vue CLI respects the corresponding configuration files for these tools. For webpack, the user can either leverage webpack-merge to merge simple options into the final config, or precisely target and tweak existing loaders and plugins via webpack-chain. In addition, Vue CLI ships with the vue inspect command to help you inspect the internal webpack configuration. The best part though, is that you don’t need to eject just to make small tweaks  —  you can still upgrade the CLI service and plugins to receive fixes and new features. - Evan You

No Need to Config

When you create a new project with the CLI, you don’t have to configure anything. You get out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing, and End-to-end Testing. 

You will notice that by default there is no webpack config file. This is great in many cases, but, when your application grows or requires tailored configuration, you can, of course, configure everything. This is possible through the vue.config.js file.

The easiest way to tweak the webpack configuration for example, is to provide an object to the configureWebpack option in vue.config.js.

The object will be merged into the final webpack config using webpack-merge. Take a look at the configuration guide to see how flexible the CLI projects are.

Plugin Architecture

If you were using Vue CLI 2, I am sure you remember that when you were creating a new project, you could pick the features you wanted to drop in, like ESLint, Testing libraries, etc. Though, later, if you changed your mind and decided to add something more, you had to implement it on your own. 

In Vue CLI 3, you can just run vue add and drop in a feature any time. This happens because now every one of these features is a plugin. To add ESLint support, for instance, you’d run vue add @vue/eslint.

The Vue CLI plugins also support prompts, so you can define what you want during the project creation or plugin addition process.

vue add @vue/eslint

Everyone can create a Vue CLI plugin. Right now, there are more than 200 plugins, including apollo, electron-builder, and pwa, to name a few.

If you want to learn more about plugins or ever want to create your own, take a look at the guide.

Instant Prototyping

Vue CLI 3 comes with an insane new feature. When you want to play around with a component, instead of creating a new project, you can just create a Single File Component (.vue file) and serve it in the browser by running vue serve MyAwesomeComponent.vue.

You can even build your component and deploy it if you ever want to do that.

Compatible and Futureproof

In the package.json file, you will find a browserslist file where you can specify the of browser your project is targeting. This value will be used by @babel/preset-env and autoprefixer to automatically determine the JavaScript features that need to be transpiled and the CSS vendor prefixes needed.

See here for how to specify browser ranges.

Modern Mode

The new Vue CLI also offers a "Modern Mode" so you don’t ship polyfills and transpiled code when the users are browsing your application through a modern browser. 

vue-cli-service build --modern

Vue CLI will produce two versions of your app: one modern bundle targeting modern browsers that support ES modules, and one legacy bundle targeting older browsers that do not.

The cool part, though, is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in Phillip Walton's excellent post:

Graphical User Interface

This one is really awesome. Thanks to the amazing work by Guillaume CHAU, you can now manage your projects through a graphical user interface if you want to. The GUI is especially useful for newcomers, but it’s hard to not like it even you are a terminal geek.

It comes with a ton of features beyond creating projects, so I will only showcase a few here.

Create a Project

Manage the CLI plugins

Manage Project’s Dependencies

Configure the Project

Yes! Even the ESLint rules!

Run npm Scripts

Give it a Shot!

Vue CLI 3 has been around for a while now and people love it. Upgrade today if you haven’t already, and you will benefit in so many ways. Oh! Did I mention that it comes with Webpack 4? This means that you get even faster development experience and better bundle management.

Check out the docs and try it out.

Have fun!

For more info on Vue: Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue, our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.