Installing Vue
You can add Vue with one script tag, or create a full project with the official scaffolding tool.
In this page:
Syntax
npm create vue@latest
cd project-name
npm install
npm run devInstalling Vue
For quick experiments use the CDN. For real projects run npm create vue@latest, which sets up Vite, optional Router, Pinia, testing and linting. Then npm install and npm run dev start a local dev server with hot reload.
Note:
Vue projects use Vite by default, which starts almost instantly.
Example: Installing Vue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
$ npm create vue@latest
✔ Project name: my-vue-app
✔ Add Vue Router? Yes
✔ Add Pinia? Yes
$ cd my-vue-app
$ npm install
$ npm run dev
VITE v5.2.0 ready in 320 ms
➜ Local: http://localhost:5173/
</body>
</html>⚠️ Run this in your own terminal or Node.js environment.
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Using the old Vue CLI for new projects
- Forgetting npm install after scaffolding
- Running node versions that are too old
Chapter Summary
- npm create vue@latest scaffolds a project
- Vite is the dev server
- npm run dev starts it
- The CDN needs no tools
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: