Build Tooling

Similar to other frameworks, a collection of tools has sprung up around Vue. These tools facilitate the development of applications (such as code generation), prepare them for release or deployment (for example, compilation and packaging), or assist with debugging.

Let’s learn two of these categories—build tooling and debugging. Both are well served by official Vue tools.

Why use build tooling?

While including Vue from a CDN can be a good option when we’re just starting out, or when we’re whipping up a quick proof-of-concept app, we’ll want to introduce some build tools to assist us in producing modern, modular, and efficient JavaScript that’s ready for production.

Having a good build tooling setup will pay dividends by automating much of the work of preparing our code for deployment. It also ensures the process is reliable and repeatable and removes the opportunity for human error (for example, forgetting to perform a step in a manual process).

Let’s take a brief look at some of the most common tasks handled by modern build tooling.

Transpilation

Transpilation is using modern JavaScript syntax in old browsers. The newer JavaScript syntax and features (post ES2015) facilitate more concise, readable code, as well as make JavaScript a more pleasant language to develop in. Even though all modern browsers now support ES2015 (aka ES6), we don’t always have the luxury of ignoring older browsers.

By adding a build step with Babel, we can transpile our code back to an older version (including some polyfills where necessary) and support older browsers without having to give up the modern language features.

As a bonus, by introducing transpilation, we can also adopt more cutting-edge features before they’ve gained widespread browser support!

Linting

Linting ensures code quality. A must-have tool for serious JavaScript developers these days is the code linter—used for analyzing code to find errors, bugs, and other potential problems. A linter can be run during development and/or during a build step, scanning our code for syntax errors as we type. Many popular code editors and IDEs can be configured to display these errors as we type, giving us real-time feedback and helping to prevent bugs in our code.

ESLint, one of the most popular linters, can also be configured to check if our code conforms to predefined rules for coding conventions and even code style preferences. There’s even an official Vue plugin for ESLint (eslint-plugin-vue), which will help us produce idiomatic code that adheres to recommended best practices.

Using single-file components

One major benefit of introducing a build step is that we can also start using Vue’s single-file components (SFCs) within our application. SFCs allow us to combine the template, code, and styling for a component within a single file with a .vue extension.

The advantages of keeping the logic and UI for a component together in the same file are twofold:

• The components are easier to maintain because all the necessary parts are kept together and not spread out through the file system.

• Each component is self-contained, resulting in code that’s much easier to reuse in other projects.

Here’s an example of a component file: