Kickoff: 3.0 plans

[yyx990803]

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

[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.

[yyx990803]

@egoist yep, exactly. Would you be interested in starting this? Feels like we can reuse/learn a lot from Poi. I currently have my hands full with 2.5, won't be able to work on this until that's released.

[Akryum]

Also, maybe we should make sure the whole flow is proxy-proof for enterprise usage.

[billyryanwill]

A really tiny thing from me (I love vue-cli already), would be automatic port hopping if the default port is already being used. A few of our less technical members have struggled setting up and aren't comfortable changing the port it runs on so it would be cool if this could be implemented!

If I'm being ignorant and this is already an option then please set me straight :)

[yyx990803]

@billyryanwill good point, that's definitely something people have been asking for.

[chrisvfritz]

@billyryanwill @yyx990803 The portfinder package makes this really easy! It's actually slated to be added to the Webpack template.

[dabernathy89]

Is a template for distributable components part of the roadmap?

[cristijora]

I personally enjoy POI a lot and it's presets. I think it's more controllable than create-react-app.
I also like the simplicity of next. Maybe combine and take the best pieces from all those 4 options?

[blocka]

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.

We also need to deploy to a staging server as well, and the first thing we do on a vue-cli setup is remove the hardcoded NODE_ENV=production

I think there should be some thought in here as to how to allow this workflow out of the box.

[HerringtonDarkholme]

I would suggest an eject option similar to create-react-app. It's for advanced users and is a one-way operation. But I guess advanced users will want to have full control of their building scripts (compared to editing vue.config.js).

[egoist]

@HerringtonDarkholme with webpack-chain you actually get full control of your webpack config, and it's hard to have both eject and a preset system.

[karol-f]

Maybe Neutrino (https://neutrino.js.org/) by Mozilla is a good fit? It provides "presets" which can be easily customized and extended when needed.

Description - https://davidwalsh.name/neutrino
Custimization - https://neutrino.js.org/customization/

[egoist]

@yyx990803 : Better error reporting, e.g. jumping directly to source code from error overlay.

Maybe contribute to https://github.com/geowarin/friendly-errors-webpack-plugin (or a fork if necessary)

@karol-f : Maybe Neutrino (neutrino.js.org) by Mozilla is a good fit?

Sure, maybe start with making a Vue preset for Neutrino and wrap them all in a cli like vue-scripts or similar.

[HerringtonDarkholme]

@egoist I don't think eject can be replaced by webpack chain. For example, webpack chain doesn't generate other configuration file like .babelrc, .postcssrc, etc. Also, users have to write their own eject/export function.

it's hard to have both eject and a preset system.

Can you elaborate why it is hard? IMHO eject is one-way operation. that means, once ejected, the project is no longer influenced by preset. Upstream preset change don't need to be applied to ejected projects.

[Akryum]

Well, you don't need to eject to use a .babelrc or .postcsssrc file.

[Ankit-Dave]

Is it also possible to add development build command in package.json like

vue-scripts build-dev: Build app for development use (webpack)

this is specially useful if you want to test and debug on remote server.

[Pokom]

@egoist Sure, maybe start with making a Vue preset for Neutrino and wrap them all in a cli like vue-scripts or similar.

How much effort do you believe this would take? Assuming I know very little about the subject but would be willing to learn :)

[znck]

Maybe presets or something to optionally add tools like CSS lint, eslint, storybook, visual testing etc.

[Mark-L6n]

Vuex is so commonly used, it would be good to add a Vuex option.
This would also help enforce that advanced configurations (i.e. pwa & whatever else comes along) mesh well with vuex.

[elpete]

Any thoughts on renaming it to create-vue-app to take advantage of Yarn’s create functionality and to standardize with the rest of the ecosystem?

[egoist]

@elpete FYI, there's already create-vue-app

[PengXing]

Will multi entries be supported in one project?

[UncleBill]

Specify port from cli: vuejs-templates/webpack#923

[brianvoe]

This sounds exactly like the process i built. 😄
Docs need some update but we use this for our production apps. The general purpose is you dont need any configuration unless you want to add additional webpack plugins or adjustments aside from the base webpack config.
http://vue-build.com

[posva]

@brianvoe That animation ✨

[brianvoe]

@posva Thanks!

[mjbates7]

If we say created a project with vue-cli webpack template for example and you've updated the template to include fixes, new features/configuration etc, will there be a way to update it to the latest version in place? Like react you can update the react-scripts dependency in your project - it would be good to have something similar to this.

Something like: vue update webpack <foldername>

[LinusBorg]

No, The "ole" templates will not get an update mechanism.

But new projects created with the new cli will.

[mjbates7]

Sounds spot on. V3 onwards I gather?

[Akryum]

Since v3 is made from scratch with a complete new architecture, it's safe to say that it will not be retro-compatible.

[serak]

also i think on vue-cli or webpack template static path on build prod should be fixed... all the assets are currently build as src=static/js/..... which on windows os or xampp apache is undefined path unless i change all to ./static/js/ ....

root path : http://localhost/prodbuild/

static path on npm run build : static/[js/css]/....

in which the browser is assuming the assets are on http://localhost/static/[js/css/]/... instead of http://localhost/prodbuild/static/[js/css]/...

thanks

[LinusBorg]

This is not a thing to be discussed here, the webpack template has its own repository.

[corbinu]

I have to say I was really curious to try out v3 as I have been using my own custom templates with v2. However the requirement of yarn rather than something like lerna which is compatible with npm as well is a huge non starter for me.

[codetheorist]

@LinusBorg What I meant by multiple configs is, come devs or designers may want to have, for example, the choice to save different presets, rather than one default configuration.

[yyx990803]

@codetheorist 3.x allows you to save multiple presets.

[ralrom]

How do we pass options to the webpackConfig object? I would like to modify some options which are passed in cli-service/lib/config/prod.js but I wasn't able to figure out how to do this.

[yyx990803]

@ralrom docs are not ready yet, but here's how:

Create a vue.config.js in root (you may need to remove/copy the "vue" field in package.json first):

// vue.config.js
module.exports = {
  chainWebpack: chainableConfig => {
     // modify config with webpack-chain
     // https://github.com/mozilla-neutrino/webpack-chain
  },

  configureWebpack: config => {
    // mutate config directly, or return new config
  },
  
  // object literal will be merged into base config using webpack-merge
  configureWebpack: {
    // ...
  }
}

[Ldoppea]

(you may need to remove/copy the "vue" field in package.json first)

@yyx990803 Where should it be copied?

The simple presence of vue.config.js disables the linter, so I try to add the functionality back.

But when added to configureWebpack I get Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema..
When added directly in the export, nothing happens.

Is there any other side effect when using vue.config.js?

[yyx990803]

@Ldoppea

module.exports = {
  lintOnSave: true,
  configureWebpack: ...
}

[Ldoppea]

It works, thanks 😉

[phiter]

How do you enable source maps to those loaders on the 3.0 CLI?

[toBeTheLight]

How can I make it as a multi-page application?
Will it match the same name files?
for example:

src/index.vue to public/index.html
src/user.vue to public/user.html

Or I only can achieve this by setting webpack in vue.config.js?
thank you.

[yyx990803]

Closing this as we are close to the first beta of 3.0 - if you have any particular feedback regarding current alpha, please submit issues with specific details. Thanks everyone for participating in the discussion.

[hearsay316]

你好! 我有时候会用hbuilder直接打包成安卓的app,在vue cli 2.0中只要将的config下的index.js的改成assetsPublicPath: './',路径就完全正确.在3.0中我需要自己将dist里的html引用加点 就像这样
link rel=preload as=script href=./js/vendor.6c050399.js

能不能加个webapp模式 ???

[serak]

why yarn build when i am using npm ? very confusing and where did the webpack config go on vue-cli 3?

[blocka]

the whole point is that you don't _have_ to worry about the webpack config. It's abstracted away behind one easily upgradable depedency

…

On Wed, Feb 21, 2018 at 5:43 AM, Serak Shiferaw ***@***.***> wrote: why *yarn build* when i am using npm ? very confusing and where did the webpack config go on vue-cli 3? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#589 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACoukZI3zaenIljNMVx9b9RMxr4rUfqks5tW_NlgaJpZM4PU2yY> .

[serak]

what happens when there is a bug in default config file. i use to change some value in config/index.js so than when i build for production every link works as it should be

build: {
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),

   // Paths
   assetsRoot: path.resolve(__dirname, '../dist'),
   assetsSubDirectory: 'static',
   assetsPublicPath: '',  // use to be assetsPublicPath: '/' in which it assumes my page is in the root directory like localhost/vendor.js instead of localhost/whateverfolder/vendor.js

[rigor789]

@serak take a look at the configuration docs: https://github.com/vuejs/vue-cli/blob/dev/docs/config.md more specifically the baseUrl option

[yyx990803]

@serak read the documentation please. Locking this thread.