How the new Vue CLI simplifies development

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 (web pack, 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:

    npm install -g vue-cli

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

    npm install -g @vue/cli

Both installations enable you to set up 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:

    vue 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 web pack advanced setup.

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

    vue 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 web pack advanced template. As we will soon see, the new CLI tool also goes dead-simple by providing a prototyping alternative.

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 fulfil 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:

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

Next, install the add-on for serving prototypes:

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

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

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

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:

    {       "useConfigFiles": true,       "router": true,       "vuex": true,       "cssPreprocessor": "sass",       "packageManager": "yarn",       "plugins": {         "@vue/cli-plugin-babel": {},         "@vue/cli-plugin-eslint": {           "config": "airbnb",           "lintOn": ["save", "commit"]         }       }     }

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

You can also use a remote preset on Github:

    vue 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.jsfile. 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 web pack configuration. For example:

    // vue.config.js 
    module.exports = { 
      configureWebpack: { 
        plugins: [ 
          new MyAwesomeWebpackPlugin() 
        ] 
      } 
    }

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

    // vue.config.js 
    module.exports = { 
      configureWebpack: config => { 
        if (process.env.NODE_ENV === 'production') { 
          // mutate config for production... 
        } else { 
          // mutate for development... 
        } 
      } 
    }

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:

    npm install -g @vue/cli-init     # OR     yarn global add @vue/cli-init

Then you can go ahead to run the old command:

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