Vue CLI

Vue CLI was the older webpack-based toolchain. New projects should use Vite via create-vue. This lesson covers practical patterns, syntax, and mistakes to avoid.

Vue CLI Status

Vue CLI was the older webpack-based toolchain. New projects should use Vite via create-vue.

You may still encounter Vue CLI in maintenance mode on legacy apps.

# legacy
vue create my-app
# prefer
npm create vue@latest

Contrast CLI vs create-vue.

Migration

Move to Vite; adjust env prefixes and build scripts.

Prefer Vue 3 + Composition API.
Use script setup for SFCs.
Keep components focused.
Lean on official docs.

Vue CLI Cheatsheet

Quick reference for patterns covered in this lesson.

Item	Example	Purpose
Vue CLI	legacy	Webpack
Vite	modern	Default
vue.config.js	CLI config	Old
vite.config	new config	New
plugins	differ	Check
mode	VUE_APP_ vs VITE_	Env

If Stuck on CLI

Upgrade when feasible — Vite DX is worth it.

Common Mistakes

Starting new CLI projects in 2026.
Blind copy of vue.config.js into Vite.

Key Takeaways

Vue CLI is a core Vue skill.
Practice in a Vite app.
Prefer clarity.
Revisit docs for edge cases.

Pro Tip

Treat Vue CLI knowledge as reading skills for older repos.