Kickoff: 3.0 plans

We have been discussing an upgrade for vue-cli for a while, in order to address a few issues in the current version.

Problems

1. 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;

   • pulling directly from github lacks proper version control mechanism that npm packages have;

   • less experienced users can get intimidated by the seemingly complex code in the build directory.

2. Too many decisions to make upfront resulting in a less smooth onboarding experience.

   The user has to first pick a template, but for beginners they usually do not possess the experience to decide which template fits their use case best. The official webpack template has a number of questions regarding linters and test tools, which can also be intimidating for beginners.

Solutions

1. vue-cli@3.0 will be moving towards a “config/scripts in a package” model, which is commonly used among several other tools:

   • create-react-app
   • Next.js
   • Nuxt.js
   • Poi

2. Instead of forcing users to make non-reversible decisions upfront, we would:

   • Phase out browserify support. There will be just one template which is webpack based.

   • Configurations for common use cases (pwa, ts, ssr) can be added on demand via presets, similar to how Neutrino/Poi works. The presets can be maintained and versioned individually.

3. In addition to the encapsulated package, we will also offer the ability to configure the tooling via vue.config.js. This file exposes two functionalities:

   1. A centralized entry for configuring/toggling high-level built-in features, e.g. env variables, css extraction, API proxying.

   2. Get lower level access to the underlying webpack config and tweak it (probably with webpack-chain). This essentially works like a local preset.

Other Ideas

• We will probably split out vue build into an addon (e.g. vue-cli-build) so the initial install of vue-cli can be faster. vue build can simply try to call vue-cli-build, and prompt installation if it is not found.

• vue list will be deprecated, OR list available presets instead.

• Default integration of vue-test-utils and probably Jest as the runner (although it can lead to license concerns)

• Better error reporting, e.g. jumping directly to source code from error overlay.

• Grep for common warning / error messages and suggest potential doc links.

• Auto port detection (suggested by @billyryanwill)

• Your idea here

I realize this is in fact very similar to Poi and since @egoist has been an active contributor to vue-cli itself, I would love to get feedback from @egoist and potentially collaborate with him to build the new version. Maybe we can even build this on top of a fork of Poi?

/cc @vuejs/collaborators

[posva]

@brianvoe That animation ✨

[egoist]

This is what I imagine vue-cli might look like:

• vue create: Create a project with only app code (or name this command vue init)
• vue init: Still the old vue init behavior (or rename this command to vue clone)

The commands we set in package.json for projects generated by vue-cli:

• vue-scripts build: Build app for production use (webpack)
• vue-scripts dev: Run app with a dev server (webpack)
• vue-scripts test: Run Jest (?) against test files.

Basically a create-react-app + react-scripts structure but we don’t eject, we make use of webpack-chain instead.