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.
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
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.
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
If you want to learn more about plugins or ever want to create your own, take a look at the guide.
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.
See here for how to specify browser ranges.
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:
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.
Yes! Even the ESLint rules!
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.
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.
Alex Kyriakidis is a Vue.js Core Member and teaches Vue.js at VueSchool.io. He is a full stack developer and consultant, passionate about quality code and best practices. He loves good movies, video games, and likes his coffee frozen.
Subscribe to be the first to get our expert-written articles and tutorials for developers!