Using the New vue-cli 3 to Scaffold Vue.js Apps

vue-cli version 3 brings a whole new developer experience. The Vue team put a great effort in making sure that creating a Vue.js project is smooth and that no initial configuration is required. At the same time, extending and tweaking the project configuration in a concise and easy way is also made possible.

Let’s take a look at some features of the new vue-cli.

Getting Started

First you need to install it:

$ npm install -g @vue/cli

As you can see, Vue.js now uses scoped packages to distribute their packages under the @vue namespace.

Then we can simply create a project by running:

$ vue create cli-test # cli-test is just any folder name

That will open up a prompt asking if you want the default config (eslint, babel) or if you’d like to add extra features, such as:

• TypeScript
• Progressive Web App support
• Vue Router
• Vuex
• CSS pre-processors
• Linter / Formatter
• Unit testing
• End-to-end testing

Depending on what options you choose, you’ll get more questions. Just choose what fits best for you. When you finish, dependencies will start to be installed and your project should be ready to go.

Configuration

vue-cli should have created some configuration. The default configuration is created in the package.json and it looks like this:

{
  // ...
  "vue": {
    "lintOnSave": true
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  "eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

You can see a brand new @vue/app package that has all the Babel configuration Vue needs to run. But you can still tweak it and add any other configuration you’d like.

As per the eslint config, it includes the plugin:vue/essential which has a recommended ruleset for Vue following its style guide. Additionally it also includes eslint:recommended but that can vary depending on your preferences. For example if you chose to have eslint and prettier, you’ll get @vue/prettier instead.

You can tell the cli to put the config in separate files if you chose the features manually. That will create some files depending your choices such as .babelrc, .postcssrc, jest.config.js, tslint.json, etc. You can move out to files the config at any point by removing it from package.json and moving it to its respective config file.

When choosing the options manually, you’re asked whether you’d like to save that configuration as a preset for future project. That configuration is saved in ~/.vuerc, just in case you need to modify it at some point.

npm Scripts

Out of the box, you’ll get a zero-config development and production environment that is already setup following best practices. The dev environment comes with hot module reloading, fast building, and more while the production one provides minification, module concatenation, code optimizations and so.

This happens thanks to vue-cli-service, used in the npm scripts of your package.json files. Internally, vue-cli-service has webpack configurations ready for different environments.

The scripts available to us by default are:

• serve: “vue-cli-service serve --open”
• build: “vue-cli-service build”
• lint: “vue-cli-service lint”. You don’t need to manually run it, it could be run automatically if you chose to lint on save or before commit

And if you added more features, you could get some extra scripts:

• test: “vue-cli-service test”
• e2e: “vue-cli-service e2e”
• e2e-open: “vue-cli-service e2e:open”

You can run any of those by using npm run. For instance: npm run serve will start a dev server.

Environment Variables

vue-cli uses the conventional .env file as suggested by the twelve factor app. That makes sure it follows standard conventions and is cross-compatible with other systems.

You can define a .env file as follows:

VUE_APP_BASE_URI=/api
VUE_APP_DEBUG=true

And they’ll be be loaded and available using process.env.VUE_APP_BASE_URI, for example.

You can also define environment variables per environment. For that you must add the appropriate suffix, which are taken from the NODE_ENV variable:

• .env.development
• .env.production
• .env.test

They will override the base .env values. For example, from the previous example, it’s better that we define VUE_APP_DEBUG based on the environment:

VUE_APP_DEBUG=true

VUE_APP_DEBUG=false

Proxy

You can configure a proxy by adding a proxy object to the package.json file in order to forward some calls to a specific url in development:

{
  "proxy": {
    "/api": "http://localhost:4000"
  }
}

That way, all calls that match the /\/api/ pattern will be forwarded to http://localhost:4000

The vue.config.js File

By default, you’ll have a vue config key on your package.json, but you can move out that config to a vue.config.js file.

The vue.config.js file is intended to have app configuration. For now, there are already a few properties you can use, but it’s expected that this file will be the target for upcoming features or plugins:

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    output: {
      path: __dirname + "/cool-build"
    }
  }
};

I think lintOnSave is pretty descriptive on its own already.

The configureWebpack key allows us to modify the internal default webpack configuration. That’s really powerful, since by default you have the most common features setup for different environments with no config at all. But if you need it, you can tweak it using this key. In the example, I’m just changing the output path which defaults to /dist.

The configureWebpack object will be merged with the internal one. You can also use a function that accepts the config as an argument:

module.exports = {
  configureWebpack: config => {
    // ...
  }
};

Adding CLI Plugins

You can always start from the basic default configuration and add functionality as you go by using plugins. They all work in the same way: you install them, then invoke them and they do the magic for you.

For example, say you need to have Progressive Web App (PWA) functionality and you didn’t choose it when you created the project. To add it is as easy as:

$ npm install @vue/cli-plugin-pwa
$ vue invoke pwa # you don't need the @vue/cli-plugin- prefix

Plugins can also have options when they are invoked. For example, cli-plugin-eslint can be invoked with the following arguments:

$ vue invoke eslint --config airbnb --lintOn save

Wrapping Up

You’ve seen an overview of the new vue-cli. It has a well defined architecture that makes it extensible while starting off from zero config. It covers some usual cases like proxying or setting environment variables as well. Expect more cool features and plugins in the future.

Stay cool 🦄