Vue CLI 3.0 is here as the standard build toolchain behind Vue applications

3 min read

The team behind Vue has announced Vue CLI 3.0 as the standard build tool behind Vue applications. Vue CLI 3.0 minimizes the amount of configuration developers have to go through. At its core, it provides a pre-configured build setup on top of webpack 4 with features such as hot module replacement, code-splitting, tree-shaking, efficient long term caching, etc.

Vue CLI3.0 also comes with a Modern mode where developers can ship native ES2017+ bundle and legacy bundle in parallel. Developers have Multi-page mode to build an app with multiple HTML/JS entry points. Also, they can build Vue Single-File Components into a library or native web components.

Developers are also provided with optional integrations (TypeScript, PWA, Vue Router & Vuex, ESLint / TSLint / Prettier, Unit Testing via Jest or Mocha, E2E Testing via Cypress or Nightwatch) that they can use when creating a new project.

Vue CLI 3.0 comes with Zero configuration

In most cases, developers just need to focus on writing the code. On scaffolding a project via Vue CLI 3.0, all redundant work such as installing the Vue CLI runtime service, selected feature plugins, and the necessary config files are done automatically.

Vue CLI also ships with the vue inspect command to help developers inspect the internal webpack configuration with no ejection required to make small tweaks.

A powerful Plugin system

Vue CLI 3.0 has an extensible Plugin system which can

inject dependencies and files during the app’s scaffolding phase
tweak the app’s webpack config or inject additional commands to the CLI service during development.

Developers can also create their own remote preset to share their selection of plugins and options with other developers.

Instant Prototyping

Vue CLI 3’s vue serve command, allows developers to start prototyping with Vue single-file components, without waiting for npm install. The prototyping dev server comes with the same setup of a standard app. This allows developers to easily move the prototype *.vue file into a properly scaffolded project’s src folder to continue working on it.

Modern Mode

Vue CLI 3.0 has a modern mode with produces two versions of an app. First, a modern bundle targeting modern browsers that support ES modules, and second a legacy bundle targeting older browsers not supporting ES modules

The modern bundle is loaded with <script type=”module”>, in browsers that support it.
The legacy bundle is loaded with <script nomodule>, which is ignored by browsers that support ES modules.

Modern mode can be activated using the following command:
Vue-cli-service build –modern

This release focuses on making Vue CLI as the standard build toolchain for Vue applications. However, the longer-term goal for Vue CLI is to incorporate best practices from both the present and the future into the toolchain.

Vue CLI 3.0 can be tried by following the instructions from the docs. The list of all updates are available on the Vue Medium Blog.