What’s New in Vue CLI 3.0?

  • 2019-03-27 03:58 AM
  • 408

An overview of the latest Vue-CLI version and why you should consider it for your next project

A few months ago, Evan You and the team at Vue released the latest and most exciting version of Vue CLI, version 3. This version was a re-write of the prototyping and scaffolding tool, going back to why Vue was built in the first place: ease of use.

**_Quick Poll: Take 4 Seconds and vote!_**

Re-writing the CLI Tool

The need to re-write the CLI tool came mostly from the fact that developers struggled with a lot of configurations while trying to setup Vue projects. There was also this push to bring about even more clarity about setting up tools at the start of any Vue project.

Vue js was one of the most popularly used JavaScript frontend framework in 2017 and they saw the need to break every single barrier to entry into using Vue in 2018.

Features of Vue CLI 3.0

As Vue js grew in the JavaScript community and in usage, a few problems were identified with the CLI tools:

  • Templates are not upgradable.
  • Naked configurations are intimidating and difficult to grasp.
  • Forked templates need to constantly synchronise with the upstream.

The new CLI tool ships with an already configured build setup on top of the latest webpack version. It was designed to adopt a kind of plugin architecture, (more on that later) a change from the template-based architecture in the previous versions.

Some of these features are:

  • It is totally plugin-based.
  • Zero configuration by default, so you spend all your time in development.
  • Configure everything without ejecting making upgrading really seamless.
  • You can make your own plugins and presets.

Also, Vue CLI 3 takes you from a blank canvas to a running server pretty quick, thus you can literally prototype a project with just a single .vue file.

Installing Vue CLI 3.0

To install the new CLI, you would need to have node version 8.9 or above installed in your machine. Quickly check the version of node you currently use with this command in your terminal:

node -version

Now, when you have confirmed that you are using the required node version, install the Vue CLI version 3 with this command:

npm install -g @vue/cli

If you already have an old version of the CLI and run into errors installing this new one, you can uninstall the old one like thus:

npm uninstall -g vue-cli

Creating a project

Initially, we would create a new project in the CLI with this command:

vue innit webpack-simple myapp

where myapp is the name of the application, it can be any name. We had to choose from about 4 templates which webpack-simple was one of them. Now we are allowed to choose exactly the features we want, no extras.

But now, to start a new Vue project with the new CLI version 3 we simple say:

vue create myapp

According to Vue Point, any Vue CLI 3 project by default ships with out-of-the-box support for:

  • Pre-configured webpack features like code splitting.
  • ES2017 transpilation.
  • Support for PostCSS and all major CSS pre-processors
  • Auto-generated HTML with hashed asset links and preload/prefetch resource hints
  • Modes and cascading environment variables via .env files
  • Modern mode: ship native ES2017+ bundle and legacy bundle in parallel
  • Multi-page mode: build an app with multiple HTML/JS entry points
  • Build targets: build Vue Single-File Components into a library or native web components

Vue CLI 3.0

**Vue create myapp**

We can also create extra presets and customise them by adding extra features in our Vue projects. These features include:

  • TypeScript
  • PWA
  • Vue Router & Vuex
  • ESLint / TSLint / Prettier
  • Unit Testing via Jest or Mocha
  • E2E Testing via Cypress or Nightwatch

There can be one or more than one extra feature you can add from the list above to personally suit your taste.

Vue CLI 3.0

**Customise: choose only the features you want**

If you chose the default preset, your file structure should look like this:

Vue CLI 3.0

Almost exactly like it looks with the previous cli versions.

Saving and Re-using Custom Presets

If you chose the manual option, when you have picked all the new additional features you want to add, click enter. You would begin to see follow-up questions based on the new features picked to help the CLI tool configure them accordingly as you would want them.

If you picked the router feature, you would see:

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

If you picked a linter, you would see a question like this:

Pick a linter / formatter config: (Use arrow keys)

❯ ESLint with error prevention only

ESLint + Airbnb config

ESLint + Standard config

ESLint + Prettier

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

❯◉ Lint on save

◯ Lint and fix on commit

Also, very important is that you would be asked about how you want your configurations saved for this particular Vue project.

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

❯ In dedicated config files

In package.json

Finally, you would be asked if you want to save the preset as custom saved settings so you can use it without going through the questionnaire for your next project.

Save this as a preset for future projects? Yes

? Save preset as: router-linter

This preset (and any other one you configure) would now be saved globally on your machine and you can just choose them when next you want to start a project.

Serving your Vue Application Locally

The new Vue CLI uses a development dependency called @vue/cli-service to execute scripts that spins up a local server, handle code linting and even build out your Vue application for production.

This is how the scripts section n your package.json file looks like:

“scripts”: {

  “serve”: “vue-cli-service serve”,

  “build”: “vue-cli-service build”,

  “lint”: “vue-cli-service lint”

}

so when you run npm run serve the local server is now actually being served up by the CLI-service dependency.

The same goes for when you want debug your updated code and check for errors.

npm run lint

This automatically runs the linter script on your application to fish out errors according to the linting convention and you can then go ahead to handle them.

Plugins

Remember that features scaffolded by the new CLI tool is plugin based, that means Babel, ESLint and every other custom feature is identified as a plugin. The naming convention is like this:

@vue/cli-plugin-pluginName 

Let us try adding a plugin say Typescript, to our default project. This can easily added using a line of command like thus:

vue add typescript

This installs the Typescript plugin into your Vue projects and modifies all the files the plugin affects. Some plugins come with follow-up questions just as you have in the start-up scenario, some do not.

the Vue add command works almost exactly as the ng add command in angular

Instant Prototyping: Working with Components

With the new CLI version 3, you do not really need a full fledged project with all the configs. Sometimes, you just want to work on a single component and see it run on a local development server. Good news! the new Vue CLI 3 lets you do exactly that.

To be able to use Vue CLI 3’s instant prototyping you have to globally install the Vue CLI service on your machine like this:

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

Now we can literally prototype a Vue component anywhere in your machine. So let us say you have a helloworld.vue component like this:

<template>

 <div class=”hello”>

  <h1>{{ msg }}</h1>

  <p>

   For a guide and recipes on how to configure / customize this         project,<br> check out the 
   <a href=”https://cli.vuejs.org" target=”_blank”    rel=”noopener”>vue-cli documentation</a>.

  </p>

  <h3>Installed CLI Plugins</h3>

  <h3>Essential Links</h3>

  <h3>Ecosystem</h3>

 </div>

</template>

<script>

export default {

  name: ‘HelloWorld’,

  props: {

  msg: String

  }

 }

</script>

You can change directory to the folder where this is saved and then serve it as a standalone component like this:

vue serve helloWorld.vue

This would automatically spin up the component on your machine’s localhost, exactly like it would for a full project, awesome right?. This is definitely my favourite shiny new feature of the Vue CLI 3.0

Vue Graphical User Interface

The Team at Vue also added another awesome feature that shipped with this new CLI 3.0 and that is the Vue GUI tool. It is basically a graphical user interface for the CLI. With this GUI tool, you can create projects, create standalone components, install plugins and do almost everything you can with the CLI tool itself. It is inline with the strive of the Vue team to deliver a seamless getting-started experience for beginners who would want to get started using Vue.

Vue CLI 3.0

**Vue GUI**

To use this GUI tool, you have to run this command in your terminal:

vue ui

It would start the GUI tool on a dev server in your default browser. It is really intuitive and easy to use and ideal for beginners or developers who would not want to use the cli often.

Conclusion

We have had a comprehensive look at the new Vue CLI version and all the features it shipped with. We also saw how easy anyone can get started using Vue with the new CLI. I would love to hear from your experience in the comments, and happy coding! Cheers.

Learn more

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Nuxt.js - Vue.js on Steroids
Build Web Apps with Vue JS 2 & Firebase
Vue.js Tutorial for beginners
Build a Progressive Web App In VueJs
Vuejs 2 Authentication Tutorial
Build a CMS with Laravel and Vue
Learn Vue.js - Full Course for Beginners
Vue CLI 3 Full-Stack App Structure

Originally published by Nwose Lotanna at https://blog.bitsrc.io

Suggest