As the newest version of the Vue CLI gets released, we'll take a look at the latest features and improvements of this release that undoubtedly improve how you build using Vue.
Vue.js is a frontend web development framework with a huge ecosystem, and it recently overtook React to be the most popular JavaScript framework. Alongside its simple integration, detailed documentation and flexibility, Vue.js also comes with a CLI for scaffolding Vue.js projects.
The CLI comes fully packed with all the tools and libraries that make modern frontend tooling such a chore. It comes with webpack for for bundling, lazy loading, hot reloading, etc.; Babel for ES2017 transpilation and polyfill injection; and ESLint config to help you write better JavaScript.
With the latest release of the CLI (version 3), there have been several noticeable improvements and exciting features that will undoubtedly improve the Vue.js developer’s experience. We’ll go through some of the new features that you should look out for when making use of the CLI.
Version 3 features a rewrite of the previous version aimed to reduce the complexity of configuring a modern frontend development environment.
The new CLI comes with out-of-the box support for:
.env
files.
The new CLI will provide a new flag to build a version of your application that drops support for legacy browsers. Significantly larger file chunks are built when providing support for legacy browsers, and this feature provides a much-needed alternative as you can potentially reduce your application’s build size by 16% by targeting recent browsers that support ES modules.
When building your application, include the --modern
flag and the CLI will build two versions of your application, one targeting modern browsers and a separate bundle targeting legacy browsers.
With two separate versions of your application available, you can load the legacy version on older browsers and the modern version on more recent browsers.
To get started using this feature, run the following command to build your application:
vue-cli-service build --modern
Now this is a feature that will attract a lot of interest — a user interface to manage your Vue.js projects, plugins, dependencies and project configurations. Altering project-wide settings becomes a walk in the park once you can visualize your changes. It is even more impressive once you realize you can alter your build directory, ESLint settings, etc. using toggles and check buttons.
There’s a Plugins
page where you can manage (update, add, remove ) your project’s plugins. The Dependencies
tab, where you can search for and install project dependencies, displays the monthly download totala for each dependency, which comes in handy when comparing a library’s popularity. A Tasks
tab is also included, where you can serve
, build
, lint
and test
your project, all within the GUI.
I’m sure you can’t wait to fire this up and check it out. The UI is currently still in alpha, so you may experience a few bugs here and there. Get started with the GUI by running the following command:
vue ui
Getting started with a framework or library can be quite frustrating because of the setup involved. The process of running an application typically involves installing project dependencies and plugins, transpiling and compiling the project files — which all take several minutes. That is why the new version of the CLI has an instant prototyping feature that can serve your application immediately without the hassle of installing project dependencies.
To get started with this feature, you’ll need to run npm install -g @vue/cli-service-global
to install the CLI service globally. Serving your application immediately gets easier: running vue serve
on any *.vue
file presents an instant view of the file. This file can also be moved into a larger project and it will continue working as intended.
First, run:
npm install -g @vue/cli-service-global
Then create a *.vue
file:
//Test.vue
<template>
<div>Instant prototyping. Yaay!!!</div>
</template>
Serve the file using the command:
vue serve Test.vue
Even though CLIs solve the configuration complexity issue of most projects by abstracting configuration from the users, they also prevent further configuration of the available setup and most often only offer the solution of “ejection.” After an “ejection,” further configuration falls to the user and certain users get stuck with the complication of extending their application’s setup further.
With the introduction of this CLI version, users will be able to extend their current webpack setup using tools like:
You can include configuration files to your project's root folder for third-party libraries like PostCSS, Babel, TypeScript, ESLint, etc. and they will respect the corresponding configuration files for these tools.
The CLI also ships with an inspect command vue inspect
to peek at the current webpack setup. Writing plugins or installing third-party plugins will extend the configuration further, giving you more control over your current setup.
Templates were a popular feature in version 2 of the CLI. Well, support for templates has been dropped. But, rather than templates, you can create presets that are powerful enough to inject dependencies and files during the app’s scaffolding phase and tweak the app’s webpack config or inject additional commands to the CLI service during development.
To create plugins and presets for your projects, a new plugin API has been provided so you can develop plugins to use for your projects and also share with the community. This API will enable you to configure your project’s setup, giving you the power to extend your configuration further.
You want to build your application using TypeScript rather than JavaScript? A plugin can extend your project’s current setup to include configuration for TypeScript. You can include configs for Apollo, Jest, Cypress, etc.
Get started building plugins by visiting the plugin dev guide. You can also search and install community plugins using the GUI provided by the CLI or visit the awesome-vue repository to view a list of third-party plugins.
The new CLI version includes a command to generate and wrap any existing *.vue
components and register them as native elements. To use the created element, include the element in any page as <the-element></the-element>
and include Vue globally on the page.
To create a web component using a *.vue
component, run the following command:
vue-cli-service build --target wc --name the-element src/TheComponent.vue
Alternatively, you can build multiple Vue components into a separate bundle. Registering an entry file registers all the components as native elements and asynchronously loads the underlying components when the element is instantiated.
To build multiple Vue components, use the following command. The command uses a glob pattern to match all *.vue
components within the folder:
vue-cli-service build --target wc-async 'src/components/*.vue'
With the latest installment of the CLI, you can build your application in the multi-page mode, where you provide separate entry files for each page. When using the multi-page mode, each “page” is required to have a corresponding JavaScript entry file. The value of each page should be an object where the key is the name of the entry, and the value can either be:
template
, filename
, title
, chunks
and entry
. The entry
property is the only required property and any other properties added will also be passed directly to html-webpack-plugin
, allowing the user to customize said plugin.
entry
.
Here’s an example showing how to build for two pages as shown in the official documentation:
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/index/main.js',
// the source template
template: 'public/index.html',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
subpage: 'src/subpage/main.js'
}
}
You can read more on how to configure each page by visiting the official documentation.
Also included in the new CLI version is the ability to specify build targets when building your application. With this feature, you can produce separate builds of your application for several use cases.
If you’re working on a great library, you can set your build target to library
. When using the library
build target, the CLI builds your application without including Vue in the build bundle and instead uses the global Vue
variable or it attempts to load it as a dependency.
To build your application as a library, use the following command:
vue-cli-service build --target lib --name myLib [entry]
You’ll need to provide an entry file which can either be a .js
or .vue
file. Omitting an entry file will default to the src/App.vue
file as the entry file.
After building a library, it outputs four separate files:
dist/*.common.js
dist/*.umd.js
dist/*.umd.min.js
css: { extract: false }
in vue.config.js
) — dist/*.css
This is the default build target that ouputs an index.html
file, vendor libraries split into separate chunks and static assets placed in the public
directory.
Getting started with the new version of the CLI is relatively easy. Run the following command to install the CLI globally on your PC:
npm install -g @vue/cli
# or
yarn global add @vue/cli
Also, visit the official documentation to get an overview of the latest features that are packaged with the version.
Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue, our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.
Chris Nwamba is a Senior Developer Advocate at AWS focusing on AWS Amplify. He is also a teacher with years of experience building products and communities.