LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 613 min read

Installing Vue.js (Vite Scaffold)

Scaffold a new Vue 3 project using Vite and understand every setup prompt it asks.

Creating a Project

The official way to start a new Vue project is through Vite's scaffolding tool, which sets up a modern, fast build pipeline with sensible defaults.

npm create vue@latest
cd my-app
npm install
npm run dev

Understanding the Setup Prompts

PromptRecommended AnswerWhy
TypeScript?Your choice — No for this courseThis course teaches in plain JavaScript first.
JSX Support?NoThis course uses Vue's standard template syntax.
Vue Router?Yes (once you reach the routing lessons)Adds the official router for multi-page navigation.
Pinia?Yes (once you reach the state management lessons)Adds the official state management library.
Vitest?Your choiceAdds a unit testing setup, covered in a later lesson.
ESLint?YesCatches common mistakes early, at no ongoing cost.

Running the Dev Server

npm run dev
#   VITE v5.x.x  ready
#   ➜  Local:   http://localhost:5173/
Browser Result

Click Run to see what this code prints.

Hot Module Replacement

Edit a .vue file and save — the browser updates instantly without a full page reload or losing component state, thanks to Vite's Hot Module Replacement.

Available Scripts

  • npm run dev — starts the development server with instant HMR.
  • npm run build — creates an optimized production build in dist/.
  • npm run preview — serves the production build locally to test it.
  • npm run lint — runs ESLint against your project (if selected during setup).

Common Beginner Mistakes

Forgetting npm install after cloning a project

A fresh clone has no node_modules — always install dependencies before running dev or build.

Editing files inside dist/

That folder is generated output from npm run build — any edits there are overwritten on the next build.

FAQs

Vite is the modern default for Vue projects — it starts near-instantly in development by serving native ES modules, and only bundles for production.

Port 5173 by default. If it's taken, Vite automatically tries the next available port.

Summary

You now have a running Vue project powered by Vite. Next, you'll take a tour of the folders and files it generated.

Next Lesson →

Project Structure