Run npm create vue@latest today and you get a Vite project. Run the equivalent command four years ago and you got Vue CLI, which is still sitting in plenty of repos nobody has had a reason to touch.
Both tools do the same three things at a high level. They scaffold a project, run a dev server, and produce a build. How they get there differs enough that switching between them feels like changing jobs.
The download numbers are lopsided in a way that surprised me when I first checked. Vite pulls in more than 143 million weekly npm downloads, against roughly 540,000 for Vue CLI’s cli-service package, a gap npm trends data shows widening every quarter (npm trends, 2026).
What Is Vue CLI and What Is Vite?
Vue CLI is best understood as the webpack years, packaged up and given a friendlier face. It scaffolds a project, wraps webpack configuration in something you can actually read, and installs extras through its own command.
Vite came out of Evan You’s impatience with waiting on bundlers. In development it hands source files to the browser as native ES modules and skips the bundling step. Since Vite 8 shipped in March 2026, production builds run on Rolldown, a Rust-based bundler that replaced the original esbuild-plus-Rollup combination (Vite blog, 2026).
| Trait | Vue CLI | Vite |
|---|---|---|
| Underlying bundler | Webpack | Rolldown (Rust-based) since Vite 8, March 2026; esbuild for dev and Rollup for build in earlier versions |
| Dev server model | Bundles the app first | Serves native ES modules |
| Maintenance status | Maintenance mode | Actively developed |
What Vue CLI Does
Scaffolding and building Vue.js applications is the entire scope. It has been the standard tooling since 2018 and it never tried to be anything wider.
- Configuration lives in vue.config.js, a wrapper around webpack options
- Single file components compile through vue-loader
- A plugin system installs via the vue add command
What Vite Does
Serve code fast while you work, then bundle it properly for production. That’s it. Since March 2026 that production step has run on Rolldown; before Vite 8 it was handled by Rollup.
It behaves more like a lean build automation tool than a full framework CLI, and you can get a project running without writing any configuration at all.
Under the hood, Rolldown now handles dependency pre-bundling and the shipped output, while Oxc takes care of fast TypeScript and JSX transforms. Single file component support comes from @vitejs/plugin-vue. Vite 2 through 7 split this work between esbuild and Rollup instead.
How Do Vue CLI and Vite Differ in Architecture?
Vue CLI bundles an entire application with webpack before the dev server can respond to a single request. Every file gets parsed, compiled, and packed into a bundle graph before anything loads in the browser.
Vite skips that. The browser asks for a module, Vite transforms that one module, and the production bundler stays out of the way until you actually run a build. Rolldown does that job since Vite 8, Rollup did it in earlier versions.
Shopify’s engineering team dropped webpack for Vite when building Hydrogen, saying it was fast, easy to extend, and popular enough among developers to justify the risk (Shopify Engineering, 2022).
That kind of shift keeps showing up across front-end development, not only inside the Vue ecosystem. Nuxt, the framework we cover in our NextJS vs Nuxt comparison, made the same move years ago, and Astro, Svelte, and SolidStart followed.
What Build Tools Run Underneath Each Option
For most of Vite’s history two separate engines did the actual work, and picking the right one for each job was the entire trick. Vite 8, released in March 2026, replaced both with a single Rust-based bundler called Rolldown, paired with a companion toolchain called Oxc for transforms.
In versions 2 through 7, esbuild pre-bundled dependencies during development. Written in Go, it was quick enough that module resolution barely registered as a delay. Rollup then took over for the production build, where tree shaking and code splitting mattered more than raw speed. Rolldown collapses both roles into one bundler, and it ships a Rollup-compatible plugin interface so existing Rollup plugins keep working (Vite blog, 2026).
Vue CLI runs webpack for both jobs, dev and production. That’s a big part of why its dev server feels heavier as a project grows.
Why Is Vite Faster Than Vue CLI?
The speed claim isn’t marketing. esbuild’s own benchmarks put it 10 to 100 times faster than webpack, Rollup, and Parcel on the same bundling task (esbuild, GitHub).
That gap is the whole reason a Vite dev server starts almost instantly while a Vue CLI project spends real seconds bundling before it shows anything on screen.
Hot module replacement in Vue CLI slows down as the codebase grows, because webpack has to re-check dependency relationships across the whole bundle graph on every change. Vite reprocesses the one module that changed, so update speed stays close to flat no matter how large the project gets.
The Rolldown switch pushed that advantage into the build step too. The Vite team’s own benchmarks show production builds running roughly 10 to 30 times faster than the previous Rollup-based pipeline (Vite blog, 2026).
Some numbers worth keeping in mind:
- On the same three.js duplication benchmark, esbuild finished in 0.36 seconds against webpack’s 44.74 seconds, roughly a 124x gap (esbuild, GitHub)
- Vite passes 143 million weekly downloads on npm (npm trends, 2026)
- More than 82,000 GitHub stars (npm trends, 2026)
- Vite’s own 19,000-module benchmark dropped from 40.10 seconds to 1.61 seconds after the Vite 8 switch to Rolldown, roughly a 25x improvement (Vite blog, 2026)
Hot Module Replacement in Practice
Honestly, on a small project you won’t notice much. A small Vue CLI app and a small Vite app feel about the same to work in day to day.
Push past a few hundred components and the picture changes. Vue CLI’s HMR starts stacking up delay while Vite’s stays close to instant.
Cold start behaves the same way in reverse. Vue CLI has to bundle before serving anything. Vite serves immediately and transforms on request.
Vue CLI vs Vite: Configuration and Setup Files
Vue CLI reads project settings from vue.config.js, which is built around webpack’s override syntax. You extend or override rules, loaders, and plugin options, and on a complex project that file gets long. I’ve seen a few past 200 lines.
Vite’s equivalent is vite.config.js, plain JavaScript or TypeScript, usually under 40 lines even with several plugins registered. It exports a single config object and leans on defaults for everything else.
Environment variables follow different prefixes too. Vue CLI expects VUE\APP\, Vite expects VITE\_, and neither tool reads the other’s prefix. That one bites people during migration more than it should.
Both files answer the same underlying question inside software configuration management: what changes when this specific project builds.
Plugin and Ecosystem Support in Vue CLI vs Vite
Vue CLI plugins install through the vue add command and hook directly into webpack’s build steps.
Vite plugins follow the Rollup plugin interface, which Rolldown preserves, so Vite also accepts most existing Rollup plugins without modification. Both tools cover the usual suspects.
- Vue Router for routing
- Vuex or Pinia for state management
- ESLint for linting
- PostCSS for CSS transforms
- Babel, used by Vue CLI’s webpack pipeline for older browser targets
Vue CLI’s plugin catalog is older and deeper, built up over years of Vue 2 and Vue 3 usage. Vite’s grew faster for a boring reason: it inherited the entire Rollup plugin base on day one instead of starting from zero.
TypeScript and CSS Preprocessor Support
TypeScript works in Vite with no setup. It strips types rather than running a full type check on every save, which means your build won’t catch type errors for you. Run vue-tsc separately. Vite 8 handles the stripping with Oxc, the Rust-based toolchain that replaced esbuild for this role in March 2026.
Teams wiring up stricter compiler options often keep a TypeScript cheat sheet open while touching vite.config.js for the first time.
Sass, Less, and Stylus all work in both tools after a single dependency install, and Vite needs no extra loader config for any of them. The same config file handles preprocessor output, and a CSS cheat sheet covers most of what a Sass or Less setup needs.
Production Build Output: Vue CLI vs Vite
Vue CLI hands production bundling to webpack, the same engine it uses in development.
Vite used to switch engines for production, moving from esbuild to Rollup because Rollup produced smaller, cleaner output for shipped code. Since Vite 8 in March 2026, Rolldown handles both steps, which keeps Rollup-style output quality without the handoff.
Tree shaking strips dead code in both, though Vite’s pipeline is a bit more aggressive on ES module code and tends to leave a smaller footprint on component-heavy Vue projects. Code splitting by route or dynamic import happens automatically once configured, either way.
Browser targets are where they part ways. Vue CLI assumes older browsers by default through Babel. Vite assumes modern ones unless you tell it otherwise.
What comes out the other end is a build artifact ready for a static host or a CDN, regardless of which tool produced it. Most teams drop that output straight into an existing build pipeline without touching the deployment step at all.
Is Vue CLI Deprecated?
No, but it sits in maintenance mode. Security and compatibility fixes still land. New features don’t.
The Vue team’s own GitHub repository tells new projects to use create-vue instead, which scaffolds a Vite-based setup by default (vuejs/vue-cli, GitHub).
Maintenance mode means bug reports still get looked at. It does not mean new plugins, new major versions, or new webpack integration work.
People sometimes confuse this with the Vue 2 situation, which is a different thing entirely. Vue 2 reached official end of life on December 31, 2023, just under two years after Vue 3 became the default release on February 7, 2022 (Vue.js, End of Life notice). Vue 2 gets nothing further. Vue CLI still gets fixes.
A maintained tool in a shrinking niche is not the same as an abandoned one.
Which Should You Use: Vue CLI or Vite?
Use Vite for anything new. Vue CLI stays defensible mainly for teams already deep into an existing webpack setup, and the deeper that setup goes, the more defensible it gets.
Architecture, dev speed, configuration weight, plugin depth, and maintenance status all feed into it, and they don’t carry equal weight for every team.
| Criterion | Vue CLI | Vite | Practical impact |
|---|---|---|---|
| Architecture | Webpack bundles first | Native ES modules for dev, Rolldown for the build | Vite starts and reloads faster |
| Configuration | vue.config.js, webpack overrides | vite.config.js, plugin-based | Vite needs less boilerplate |
| Maintenance status | Maintenance mode | Actively developed | Vite ships new features faster |
| Ecosystem age | Mature, webpack-based plugins | Newer, Rollup-compatible plugins | Vue CLI covers more edge cases |
What Vue CLI still has going for it:
- A deep plugin catalog built up since 2018
- Familiar territory for teams already fluent in webpack
- Roughly 540,000 weekly npm downloads and about 29,700 GitHub stars, which is proof it runs real production apps (npm trends, 2026)
- No new features are coming, only fixes
And what Vite brings:
- A faster dev server and hot module replacement at any project size
- A smaller, plugin-based configuration file
- Active development, plus the official Vue 3 Tooling Guide recommendation
- A younger plugin ecosystem, with occasional gaps for niche webpack-only tooling
For a team planning to grow the codebase over several years, this is really a question of software scalability, not today’s build speed.
When Should You Still Use Vue CLI, or When Does Vite Not Apply?
Vite does not fit every situation. Large webpack configurations, legacy browser mandates, and heavy vue-cli-plugin dependencies can make migration cost more than it saves. Staying put in those cases isn’t a bad choice. It’s the pragmatic one.
Vue CLI still earns its keep when any of these apply:
- Hundreds of lines of custom loaders and plugin overrides that would need a full rewrite rather than a port
- IE11 or similarly old browser targets, which Vite only reaches through the official @vitejs/plugin-legacy add-on
- Internal or third-party vue-cli-plugins with no Rollup-compatible equivalent yet
- A project already scheduled for retirement, where the migration effort would outlive the app
Vite’s own baseline only covers native ES module dynamic import and import.meta, so anything older needs @babel/preset-env transforms and a SystemJS runtime bolted on through the legacy plugin (@vitejs/plugin-legacy documentation, npm).
That’s a real cost for teams still supporting IE11 or older Android WebViews, not a hypothetical one.
Teams weighing the decision often run it through a straightforward risk assessment matrix before committing engineering time to either direction.
How Do You Migrate a Vue CLI Project to Vite?
Install Vite and its Vue plugin, swap vue.config.js for vite.config.js, update index.html, then fix whatever breaks. For a mid-sized app that usually takes a few days, not weeks.
- Install vite and @vitejs/plugin-vue, then remove @vue/cli-service from package.json
- Move index.html from public/ to the project root and point its script tag at main.js
- Create vite.config.js and register the Vue plugin inside it
- Rename environment variables from VUE\APP\ to VITE\_, and switch references from process.env to import.meta.env
- Update the npm scripts to run vite, vite build, and vite preview
- Start the dev server, fix broken import paths, then run a full production build and check the output
Pre-Migration Checklist
Before touching any config file, do the boring audit work:
- Check every vue-cli-plugin and third-party webpack loader for a Vite or Rollup equivalent
- Confirm the actual browser support matrix, since dropping legacy targets simplifies the whole migration
- Branch off from a clean commit before making any changes
Working from a dedicated branch under proper source control management matters more here than in a routine feature change, since rollback needs to be fast if something breaks.
Common Migration Issues
Sometimes the win doesn’t show up right away. Neon’s engineering team saw their build times stay flat right after migrating, until they traced the cause to Rollup module limits inside a heavy Ace Editor dependency (Neon, 2024). Patching that one dependency to depend on roughly 450 fewer modules cut their build time by about 10 seconds, close to a 50% improvement.
The usual breakages are smaller than that:
- Absolute import paths that assumed webpack’s resolve.alias configuration
- CommonJS-only packages that don’t ship an ES module build
- Environment variables still read through process.env instead of import.meta.env
Running regression testing against both the dev server and the production build catches most of these before a real user ever sees them.
FAQ on Vue Cli Vs Vite
Is Vue CLI the Same as the Vue Command Line Interface?
Not exactly. Vue CLI covers the whole toolchain built on webpack, including vue-cli-service and its plugins.
The vue command itself, running vue create or vue add, is just the installer front end that scaffolds projects and adds plugins.
Why Do Nuxt, Astro, and Svelte Also Default to Vite?
Same reasons Vue did. Fast cold start, native ES module serving, and a Rollup-compatible plugin ecosystem that carried over into Rolldown.
Standardizing on one build tool also lets framework teams share bug fixes and tooling improvements instead of duplicating the work four times over.
Can Vue CLI and Vite Be Used in the Same Project?
Not in one build pipeline. Each tool owns the whole dev server and production build, so mixing them means running two separate toolchains side by side.
That usually happens only during a phased migration, rather than blending both configs into a single vue.config.js or vite.config.js.
Does Vite Work With Vue 2, or Only Vue 3?
Vue 2 works through a dedicated plugin package, though most tooling and documentation assume Vue 3.
New projects rarely start on Vue 2 today, so migration guides and starter templates are written for Vue 3.
How Do You Start a New Project With create-vue Instead of Migrating?
Run npm create vue@latest and answer the prompts for TypeScript, router, and state management.
You get a Vite-based project from scratch, which is faster than porting an existing Vue CLI app when there’s no legacy code that has to come along.
What Should You Do First After Choosing Between Vue CLI vs Vite?
Lock the choice into vite.config.js or vue.config.js before writing a single component. Switching build tools mid-sprint costs more than choosing wrong on day one.
After that, order matters more than speed:
- Confirm the decision against project lifespan, not this week’s build speed
- Commit to one config file, vite.config.js or vue.config.js, across the whole codebase
- Set a review date tied to Vue CLI’s maintenance status
One last way to look at the download numbers. Vite’s 143 million weekly npm downloads against Vue CLI’s roughly 540,000 weekly downloads works out to roughly 265 Vite installs for every single Vue CLI install, a gap neither figure states on its own.
That same build-tool logic carries over once the bigger framework question comes up, covered in our Vue vs React comparison.
- Laravel Cheat Sheet - September 13, 2026
- AI Agent Development for Healthcare and Financial Services: A Compliance Playbook - September 13, 2026
- How to Use GitHub Projects to Manage Your Work - September 12, 2026
