How Vue-Cli 3 Will Shape Our Future

Published in

Vuetify

7 min readMar 30, 2018

Vue-cli 3 is now in beta, and it’s been rebuilt from the ground up. For about a year now, I’ve been in charge of the Vuetify templates made under vue-cli 2.x, and most recently I made vue-cli-plugin-vuetify for the new vue-cli 3. Based on that experience and I want to share my thoughts on how the new vue-cli will forever change the way we all develop with Vue.

Disclaimer: I won’t be giving a walk-through of how to use vue-cli 3 in this post. However, there are two excellent guides out there. The first is a post by Alligator, and the second is a YouTube video of Evan You’s demo from his latest talk.

If you already know all about vue-cli 2.x’s problems, feel free to skip to the next section. Below I’ll summarize the 3 main issues that lead to the old cli’s redesign.

1. Templates quickly grow stale

The first and main problem the old template-based system has is that it’s hard to keep templates, as well the apps made from them, up-to-date with the latest upstream changes.

The core team maintains 6 templates, the most popular one being vuejs-templates/webpack. This one template has been forked over 3,000 times, which makes sense since the template’s own README suggests that you “Fork It And Make Your Own”.

With that said, any given update in that webpack template immediately puts all those forked templates out-of-date, and it’s not easy to update. First, a template would need to merge (preferably rebase) and test those changes. This is difficult to automate because there are always git conflicts one has to manually resolve. Also, testing templates is pretty tedious since you need to make an app for each of the different permutations possible, or at least the most important ones, and then run your tests on each.

The situation is even worse for an app that’s been scaffolded from a template. Short of manually making the changes, or making a new project and copying over the src files, there is virtually no way to get those updates.

2. It’s still not easy enough to get started

While there are more than 3,000 forks of Vue templates out there, realistically only a few dozen of them are well-known so as to be viable options for most developers. Even still, it’s a lot. Vuetify along offers 9 templates to choose from. That’s a pretty big rolodex to sift through to find your app’s starting point, which is enough possibility paralysis for even the hardiest of developers.

Then imagine the dozen or so choices a user has to make once they’ve decided on one template. Since many questions are “do you want to use this library or that one?” it’s easy to lose hours researching and deciding between tools to make the “right choice” since aside from starting over, there is no turning back.

3. All the libraries’ dependencies are in the same files

If you’ve never developed or maintained a template under the old cli before, here’s an oversimplification of it. Mainly, what it does is copy source code and config files into your project’s directory. Almost every file contains dozens of conditional statements from each supported library that toggles different permutations of the app to scaffold, all based on the user’s choices during setup. That’s it in a nutshell.

This mix of concerns just compounds the first issue because it’s even harder to keep up with changes from other libraries, unless the upstream template syncs those changes, and you sync with the upstream, too. Despite the old cli’s undeniable usefulness, it’s a lot the work to maintain all those templates which makes the whole ecosystem pretty darn unsustainable.

“Sustainable development is development that meets the needs of the present without compromising the ability of future generations to meet their own needs” — Kevlin Henney

The Future Is All Plug And Play

Never fear! Vue-cli 3 is here! And now with a brand spankin new plugin-based architecture!

The first way the new cli makes it easier to get started is by bringing down the number of templates to choose from to just 1. Just one single webpack template upon which libraries can plug in their custom functionality. As an old browserify fan it’s sad to say, but browserify will no longer be officially supported. Yes, it will be missed, but the core team’s gotta do what they gotta do, and focusing support on the libraries with the most demand just makes sense.

With all those templates out of the way, now you can get started simply with vue create my-app. Then anytime after the initial setup you can install whatever additional features you want. Indeed, ANYTIME after, you can easily add new plugin to your app. No more having to make all the “right choices” when you first make your app. What a relief!

Say after a month of prototyping, you wanna try Vuetify on for size. No problem! Just run…

yarn add vue-cli-plugin-vuetify
vue invoke vuetify

That’s it! You’ll get the same easy setup experience you used to get from the old cli, but way after your app was made.

Oh, and the templates aren’t totally gone. We’ve merely transcended them. Plugins are still able to include their own template files as one can see in Vuetify’s plugin. Better yet, the new cli uses EJS templating instead.

Teach An Old App New Tricks

One of the most powerful features in vue-cli 3, is also likely the most subtle…

You can run `vue invoke plugin` any time you want.

Not just the first time you install a plugin, but anytime after, too. In theory, this means that a plugin can maintain itself overtime. A library like Vuetify can not only bump itself to the latest version in your package.json, but with the ability to rewrite any existing file, it should also be able to handle any migration required. The same goes for webpack updates, config changes, and virtually anything typically handled by the vue-cli or a plugin.

The issue of being able to pull in updates after a project’s creation was one of Evan You’s top concerns to resolve in the new vue-cli.

…Currently, project build configurations are directly included in the template. This leads to a few problems… once created, it becomes difficult to upgrade an existing project to track latest changes in the remote template;

One awesome upside is that it reduces the learning curve for beginners, whom otherwise would have to patch their app manually, which can be a daunting task, or forgo the changes and their benefits. Even for experienced devs it’s really helpful for offloading the maintenance of some of the app’s more infrastructural features that are often reused in each app so they can focus their time and attention instead on the features that truly makes their app unique.

A DRYer Ecosystem

The template developers of yesterday will be the plugin developers of tomorrow. Plugins will be the main way to add and maintain 3rd party Vue libraries to your app.

In the future, libraries won’t have to maintain several forks and clones of other templates just to add their support to the wide variety of web apps out there. SSR, PWA, Electron, Cordova, are just some of the flavors that Vuetify currently supports, and each one is a separate template to maintain. Well no more! Soon, we’ll start to see separate plugins emerge dedicated to adding and maintaining just one feature each.

In the future, almost every Vue app will be built from the new vue-cli. We’ll even see it used to make web components that work in React and Angular apps, as well as pages with vanilla Javascript (check out Evan’s talk for a demo). It’s never been a better time to be a Vue developer!