How the new Vue CLI simplifies development

A quick overview of the best new functionality in the updated Vue CLI command line interface that simplifies development.

Introduction

Developers transitioning from React to Vue don’t have the best experience with tooling or are rather overwhelmed by the scaffold process. React has create-react-app which could set up a full-blown project for you while concealing the internal tooling logics (webpack, Babel etc). Vue has a Command Line Interface (CLI) tool too but it’s not as intuitive as expected from developers.

The Vue team is launching a new version of the CLI tool (3.0). The new version now offers the same features as create-react-app and more. It’s currently in beta but out there for us to use. I will be showing you some of the features in this post as well as how the new CLI will change your experience as a developer.

Old vs new

What would be nice to start with is to refresh your memory and give you some contextual information? I will do this by comparing the basic features of the old and the new CLI tool.

Installation

To install the old CLI tool, we would usually do this:

1npm install -g vue-cli

The new version of the CLI tool is under the @vue namespace and should be installed this way:

1npm install -g @vue/cli

Both installations enable you to setup a Vue project using the commands they expose.

Creating a new Vue project

In versions lower than v3, we would use the following command to create a new Vue project on our local machine:

1vue init <template> <name>

Where:

<template> is the template name to be used and
<name> is whatever name you want to give your project.

The templates ranged from simple prototyping setup to webpack advanced setup.

For 3.0 upwards, you would only need to do this:

1vue create <name>

This might seem less flexible since it doesn’t give us the option to choose a template but the default setup is already as simple as the simple template but sophisticated like the webpack advanced template. As we will soon see, the new CLI tool also goes dead-simple by providing a prototyping alternative.

Tree structure

Old:

1.
2    ├── build
3    │   ├── build.js
4    │   ├── check-versions.js
5    │   ├── logo.png
6    │   ├── utils.js
7    │   ├── vue-loader.conf.js
8    │   ├── webpack.base.conf.js
9    │   ├── webpack.dev.conf.js
10    │   └── webpack.prod.conf.js
11    ├── config
12    │   ├── dev.env.js
13    │   ├── index.js
14    │   ├── prod.env.js
15    │   └── test.env.js
16    ├── index.html
17    ├── package.json
18    ├── src
19    │   ├── App.vue
20    │   ├── assets
21    │   │   └── logo.png
22    │   ├── components
23    │   │   └── HelloWorld.vue
24    │   └── main.js
25    ├── static
26    └── test
27        ├── e2e
28        │   ├── custom-assertions
29        │   ├── nightwatch.conf.js
30        │   ├── runner.js
31        │   └── specs
32        └── unit
33            ├── jest.conf.js
34            ├── setup.js
35            └── specs

New:

1.
2    ├── package.json
3    ├── public
4    │   ├── favicon.ico
5    │   └── index.html
6    └── src
7        ├── App.vue
8        ├── assets
9        │   └── logo.png
10        ├── components
11        │   └── HelloWorld.vue
12        └── main.js

The comparison shows how the condensed scaffold by the new CLI looks. Less distraction and straight to business. I ignored files/directories like .gitignore, node_modules, etc since they are support contents and not relevant for the comparison.

Now that you have the basic feature comparison of both versions, let’s dig into the new version’s features and see how it improves a developer’s experience:

Zero-config prototyping

One of the best features of Vue is its ability to get you prototyping as quickly as possible. Sometimes Codepen or CodeSandbox doesn’t fulfill your prototyping needs. There are cases where you want a real setup but with less drama.

The new CLI has been simplified as you can see from the tree structure above to make prototyping faster. That’s not all. The new CLI comes with an optional add-on to even strip all distracting files from a prototyping environment.

Assuming you just want to play with a card component before including it in your main project, you could just create it as a standalone file:

1<!-- MyCard.vue -->
2    <template>
3      <div class="card">
4        <h1>Card Title</h1>
5        <p>Card content goes here. Make sure it's not Lorem.</p>
6      </div>
7    </template>

Next, install the add-on for serving prototypes:

1npm install -g @vue/cli-service-global

Make sure you are in the same folder as MyCard.vue via the terminal, then run:

1vue serve MyCard.vue

You should see the command compile your component using the default configuration and files for a standard setup:

Now open the browser on the URL shown in the console. You should see the following:

Persisting presets

Another way the new Vue CLI simplifies dev tooling is with the concept of presets. When creating a new project with the create command, the CLI asks few questions which it uses to customize the new project.

Sometimes these questions seem redundant. If I will always use ESLint, what is the point of asking about it in every project creation? With presets, I can create a reusable configuration and the CLI will use this configuration without asking me further questions.

Open ~/.vuerc file with an editor and add the following example config:

1{
2      "useConfigFiles": true,
3      "router": true,
4      "vuex": true,
5      "cssPreprocessor": "sass",
6      "packageManager": "yarn",
7      "plugins": {
8        "@vue/cli-plugin-babel": {},
9        "@vue/cli-plugin-eslint": {
10          "config": "airbnb",
11          "lintOn": ["save", "commit"]
12        }
13      }
14    }

When next you run the create command, Vue CLI will use these configurations to set up a new project for you.

You can also use a remote preset on Github:

1vue create --preset username/repo my-project

The repo must contain a root preset.json file in it. This the configuration preset that the scaffold will make use of.

Easy configuration

You can extend/tweak the build process configuration in the vue.config.js file. Make sure you have this file at the root of your Vue project. You can do things like changing the base URL as well as the build output directory. You can also extend the webpack configuration. For example:

1// vue.config.js
2    module.exports = {
3      configureWebpack: {
4        plugins: [
5          new MyAwesomeWebpackPlugin()
6        ]
7      }
8    }

configureWebpack can also be a function that receives the existing config which it can either mutate or return:

1// vue.config.js
2    module.exports = {
3      configureWebpack: config => {
4        if (process.env.NODE_ENV === 'production') {
5          // mutate config for production...
6        } else {
7          // mutate for development...
8        }
9      }
10    }

The function alternative becomes useful when you need to have some logic before generating a configuration that would depend on that logic. The example above lets you configure for different environments — production and dev.

Prefer the old CLI?

I highly recommend you stick to the new CLI when it is officially released. If for any reason you need to use the old CLI after installing the new one, you will get this message in the console:

The message is self-explanatory. You need to install an add-on to be able to make use of the old version:

1npm install -g @vue/cli-init
2
3    # OR
4
5    yarn global add @vue/cli-init

Then you can go ahead to run the old command:

1vue init webpack testing-old-cli

Conclusion

Vue 3.0, as of the time of writing, is still in beta. This does not stop you from you using it. In fact, that is the default installation you get when running the CLI install command henceforth. Feel free to install, and start making use of it. Most of the changes that will be made might not be breaking and you will still get to keep all the new awesome features.

Docs

Tutorials

Support

Glossary