Plan for Vue CLI v5

[haoqunjiang]

• Development branch: dev, and will be merged to next on each pre-release.
• Documentation: https://next.cli.vuejs.org/migrations/migrate-from-v4.html

Here are the rough ideas:

Major Dependency Upgrades

• Webpack 5 (also allows to opt-out to webpack 4), feat!: support and use webpack 5 as default #6060
• HTML Webpack Plugin 4
• Cypress 6, would be a peer dependency
• Workbox 6
• Jest 26
• Mocha 8
• ESLint 7
• Other necessary major dependency version bumps, including various webpack loaders and plugins

Planned New Features

• Performance
  • Now that we use webpack 5 by default, we can utilize its persistent cache to have a better compilation performance.
• Predicatibility
  • A --transpile-all CLI flag to include node_modules for transpiration, as a fail-safe for the transpileDependencies option. The transpileDependencies option can be set to true to transpile all dependencies in node_modules. It should be the recommended way to build your app, especially when you are using webpack 5, as the compilation overhead should be tolerable with the persistent cache.
• Modern mode
  • Enabled by default, with additional modern-only and no-modern CLI options
  • A separate polyfills chunk by default
  • Better browserslist integration. For example, safari-no-module-fix can be dropped when browserslist config does not target those buggy browsers.
• Configuration
  • Async config loading

Changed Behaviors

• vue serve/build will be an alias of npm run serve/build. If an entry is designated and no package.json found, it’ll prompt to use vite (Vue 3) or parcel (Vue 2) for instant prototyping instead.

Dropped Features

• Drop support of Node.js 8, 11, 13
• Drop support of TSLint
• Drop support of node-sass
• Drop support of extension-less Vue SFC imports
• Do not allow creating projects with uppercase names even in Vue CLI UI.

Other Breaking Changes Under Consideration

• Respect XDG specification for the location of configs

[elevatebart]

Do we choose to drop extension less SFC imports even for webpack projects or only on vite?

[haoqunjiang]

Even for webpack projects. There are edge cases in webpack environment too: #5307

[lefreet]

• VUE_CLI_SERVICE_CONFIG_PATH as a cli options ? muilt vue.config.js in monorepos
• --debug mode for server run to output some verbose? console is terrible method to track code of cli
• default show spend time for build process，to optimize.

mark

[ThreeScreenStudios]

If possible, please update postcss-loader dependency to 4.0.4 from 3.0.0 to add compatibility with Postcss 8/Tailwind 2.0.

[ModyQyW]

eslint-loader has been deprecated. Why not eslint-webpack-plugin?

[haoqunjiang]

• VUE_CLI_SERVICE_CONFIG_PATH as a cli options ? muilt vue.config.js in monorepos
• --debug mode for server run to output some verbose? console is terrible method to track code of cli
• default show spend time for build process，to optimize.

mark

These are not major design changes, so can be reserved for later minor releases.
We'll focus on the changes listed in the post first.

The last one is easy, though. I'll take a look if time permits.

[haoqunjiang]

If possible, please update postcss-loader dependency to 4.0.4 from 3.0.0 to add compatibility with Postcss 8/Tailwind 2.0.

Yeah, I'm working on that.

[haoqunjiang]

eslint-loader has been deprecated. Why not eslint-webpack-plugin?

It will be included in the final release.

[yoyo930021]

Can we add jsconfig.json when create general project?
This will work better with Vetur or VueDX.

[elmatou]

Can we address #4801 ?
It is really hard to develop & debug Service Worker when we have to rebuild the app on each iteration.

It could mean enabling service worker in development mode, which seems to be a major change.

Thanks

[fangbinwei]

Async config loading

Try to achieve this feature, but block by issue import-js/eslint-plugin-import#883

sync @vue/cli-service/webpack.config.js is required by @vue/eslint-config-standard

[zhouxinyong]

Can we add .eslintignore when create project which has eslint?

[HomyeeKing]

sometimes it cannot auto import reactive api, like type ref , it can't auto import or using quickfix

[HomyeeKing]

when init the project, if choose typescript template, add ts-jest automatically also config jest.config

[haoqunjiang]

FYI v5.0.0-alpha.0 has been released with most underlying dependencies updated.

We'll work on the planned new features next.
https://github.com/vuejs/vue-cli/releases/tag/v5.0.0-alpha.0

[3zzy]

Is module federation supported for multiple pages / build targets?

[AGDholo]

ES feature support in v5: #5881 ?

I created a brand new project using v5 alpha, but it doesn't work ?? etc.

[uxiew]

Use the online presets(ajax？or other ways), not just from a Git repo! I dont want to create a repo just for a single preset !
and if i have two preset in a repo，could I have a choice?

[Aries-Sushi]

When is the official version expected to be released?

[sxzz]

#2138
Will we consider supporting vue.config.ts?

[VincentDream]

When is the official version expected to be released?

[RaafatTurki]

Respecting the XDG specification shouldn't be listed as a breaking change, Vue could always fallback to legacy paths if the XDG ones (or their fallbacks) fail, I've just updated my issue #5649 regarding the matter.

[Mister-Hope]

Hi @sodatea , can the alpha version work now?

I just created a new project using 5.0.0-alpha.3, and I can not run the dev server:

95% emitting emit(node:17872) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
99% done plugins FriendlyErrorsWebpackPlugin

 ERROR  Failed to compile with 1 error                                                                                                   上午11:55:55
  Error: The loader "F:\template\vue\node_modules\html-webpack-plugin\lib\loader.js!F:\template\vue\public\index.html" didn't return html.

  - index.js:336 HtmlWebpackPlugin.evaluateCompilationResult
    [vue]/[html-webpack-plugin]/index.js:336:24

  - index.js:243
    [vue]/[html-webpack-plugin]/index.js:243:22

  - runMicrotasks

  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

  - async Promise.all

  - async Promise.all


No issues found.

Here is the action log: https://github.com/Mister-Hope/vue3-template/runs/1924113080

[cexbrayat]

The error comes from an incompatibility between webpack 5.22.0 (that was just released) and the html-webpack-plugin v4.5.1.

This can be fixed by setting your webpack version to 5.21.2 for now in your package.json

The proper fix is to update the html-webpack plugin to v5.1.0 (see jantimon/html-webpack-plugin#1603) . This has already been done by @sodatea in Vue CLI (see 4ce7edd), and will be out in the next release!

[petterw03]

What happens to v5 if this project is now in maintenance mode? Or is create-vue the actual stable release? This is very confusing.

[haoqunjiang]

1. I'll continue maintaining this repo, applying patches, adding small new features.
2. I'll make no major changes to this project.
3. We recommend new projects to use create-vue.

---

Regarding the v5 stable release:

1. In most cases you can just use the RC version, it's quite stable IMO;
2. I would very much like to ship a new stable release, too. But I'm not confident enough to do so because I'm not ready for the incoming questions and issues once it's out.
3. Currently, my plan is to check again and do some last-minute bug fixes and ship another RC then stable.

[bodograumann]

I think one important thing that is still missing from v5.rc is the typechecking of script-setup sfcs.

[haoqunjiang]

I think one important thing that is still missing from v5.rc is the typechecking of script-setup sfcs.

If fork-ts-checker-webpack-plugin still can't fully support that, we may end up recommending using vue-tsc separately for type-checking.

[lorand-horvath]

@sodatea You said new projects should use create-vue. OK, but for us, who are used to vue-cli (I've been using it for a long time), there's also vite... so which one should we use? The ecosystem is becoming fragmented, without any obvious explanation as to why. Isn't vue spreading itself too thin? I don't blame anyone, just asking... it doesn't seem to go in the right direction IMHO.

BTW, I've just checked create-vue - it is barely a 4 months-old project, you can't just ask people who have been using vue-cli for years to just switch to it instantly. On npm it was downloaded less than 1k times/week https://www.npmjs.com/package/create-vue
vue-cli has more than 100k/week downloads https://www.npmjs.com/package/@vue/cli
So I'm not sure anyone is ready to jump the ship yet. At least some proper explanation/documentation would be welcome...

[haoqunjiang]

create-vue is a scaffolding tool. It creates a Vue project that uses Vite for dev server and bundling.
Vite has about 400k/week downloads and the number is growing fast. It's mature enough for a new project.

You can keep using Vue CLI if you prefer webpack. It's still being maintained.

But Vite and create-vue provides a better out-of-box experience.

[lorand-horvath]

@sodatea Thanks for the explanation. For anyone out there still wondering what is going on and why there is no documentation, well... here's the new documentation at staging.vuejs.org which is currently kind of "hidden" and will most probably become the official vuejs.org
https://staging.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding

[lorand-horvath]

Currently, my plan is to check again and do some last-minute bug fixes and ship another RC then stable.

@sodatea Waiting patiently for the next Vue CLI 5 RC / stable version... I'm not ready to switch to Vite/create-vue for production yet (I've invested too much in webpack).

[lpj145]

For anyone feels missed with vue-ecosystem please, keep in mind what now vue is more easily to develop and deploy than vue 1 is launched, so to a bunch of reasons: vite is more simplest, lazy, fast way to develop, deploy and delivery like vue-cli do in the past, IMHO the vite not need a large list to reasoning with devs about why adopt vite over the vue-cli, reading the vite documentation is enough to understand the fact: now the things is more simple than the past, so trust in vue-core, we understand a lot what vue community needs to improves our jobs ❤️

ps* i like so much and use vue-cli for 4 years, but we had to admit, the evolution what vite take to development process is incredible and this is like technology works 🙂

[lorand-horvath]

@lpj145 Dude... I read that twice... now my brain hurts.

[lpj145]

@lorand-horvath i don't know why, if my words feels aggressive don't worry, so if the fact of vite is now the boss, for me is like train passing above me, but it's life 🤣🤣

[jfuehner]

@sodatea Vite doesn’t have support for async web component target builds like vue-cli currently supports.

My project couldn’t switch to Vite even if we wanted to. Was really looking forward to a stable release that supports webpack v5 and vue3z

[DRoet]

According to the last RC. v5 will be stable next week if there are no major regressions found.

[lorand-horvath]

@jfuehner One more reason to stay with @vue/cli based on webpack. Problem is, there's such a big push towards vite, mainly because it's faster.

[jfuehner]

@lorand-horvath, I would love to switch to vite if it had support for async web components. I opened a discussion thread on the vite repo a year ago requesting the feature.

[haoqunjiang]

v5.0.1 released.
Sorry that I've burnt out for quite some time last year and failed to do a stable release earlier.

There are still a few features that I wish I could add to this release but haven't finished (e.g. creating new projects with ESLint 8).
I plan to continue working on them for the following minor releases.

But anyway, this new major version is stable and ready for use. Please enjoy.

[alimony]

@sodatea Thank you for all your hard work on the project.

[lorand-horvath]

@sodatea THANK YOU

[AnWeber]

@sodatea thx

[Keavon]

Thank you so much @sodatea, it's always stressful maintaining an open source project so many people rely on and it so often goes unappreciated. But speaking on behalf of the thousands of people who haven't even stumbled on this thread, thank you for helping improve our lives as developers!

[VindyaKaruturi]

@sodatea we have updated the vue-cli version to 5.0.1 version for an existing project. This throws below error.

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'overlay'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

• options has an unknown property 'overlay'. These properties are valid:
  object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
  at validate (C:\Users\o885500\Vista\azj-geolocation-ui\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:115:11)
  at new Server (C:\Users\o885500\Vista\azj-geolocation-ui\node_modules\webpack-dev-server\lib\Server.js:232:5)
  at serve (C:\Users\o885500\Vista\azj-geolocation-ui\node_modules@vue\cli-service\lib\commands\serve.js:183:20)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  error Command failed with exit code 1.

[yoyo837]

@sodatea we have updated the vue-cli version to 5.0.1 version for an existing project. This throws below error.

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'overlay'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

• options has an unknown property 'overlay'. These properties are valid:
  object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
  at validate (C:\Users\o885500\Vista\azj-geolocation-ui\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:115:11)
  at new Server (C:\Users\o885500\Vista\azj-geolocation-ui\node_modules\webpack-dev-server\lib\Server.js:232:5)
  at serve (C:\Users\o885500\Vista\azj-geolocation-ui\node_modules@vue\cli-service\lib\commands\serve.js:183:20)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  error Command failed with exit code 1.

webpack-dev-server modified their api. You need to check their docs for break changes.

[yoyo837]

Based on your log, For example:

[VindyaKaruturi]

Based on your log, For example:

@yoyo837 Do we need to install webpack-dev-server? Because in our project we are not explicitly installed any webpack packages.

[Mister-Hope]

No, stop "in our project" why don't you check the lock file and see if you are actually using any webpack packages or not? Webpack is exactly which vue-cli is based on.

The issue panel is not a place like stackoverflow. So that "Basic and simple questions" and "asking for help" is not welcomed here as you are actually noticing a lot of people on this tread. Try asking for help in vue forums or stackoverflow.

I DO think that it's ok for you to find problems and post here for the first time, but after someone already told you that this is not a issue and provide you the reson, please try to understand yourself. If you still don't get it, try to ask for help in Discussion

For now, you are annoying me as one of the 59 people.