Creating a Project with Vite

Vue projects are scaffolded with create-vue, an official scaffolding tool built on top of Vite. It gives you a fully configured project in one command.

Running the scaffolder

Open a terminal and run:

npm create vue@latest

You’ll be prompted to name your project and choose features:

✔ Project name: … family-tree
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

For FamilyTree you will select TypeScript, Vue Router, Pinia, and ESLint. Skip the rest.

Installing dependencies and starting the server

After scaffolding, install dependencies and start the dev server:

cd family-tree
npm install
npm run dev

Vite starts a dev server — typically at http://localhost:5173 — with instant hot module replacement. Changes to .vue files are reflected in the browser without a full page reload.

Why Vite?

Vite is the build tool that powers create-vue projects. Unlike older tools (Webpack, Parcel), Vite:

• Uses native ES modules in the browser during development — no bundling step, so startup is near-instant
• Performs fast HMR (Hot Module Replacement) by only updating the changed module
• Produces an optimized production bundle with npm run build

You won’t configure Vite directly in this course. The defaults work well. The key commands are:

Command	What it does
npm run dev	Start the dev server with HMR
npm run build	Build the production bundle into dist/
npm run preview	Preview the production build locally

Exercise

1. Run npm create vue@latest and scaffold a project called my-first-vue-app with TypeScript and Vue Router enabled (skip Pinia and others for now).
2. Run npm install and npm run dev.
3. Open http://localhost:5173 and confirm you see the default Vue welcome page.
4. Open src/App.vue and change the text inside the <h1> tag to something else. Confirm the change appears in the browser instantly without refreshing.

Recap

• npm create vue@latest scaffolds a Vue 3 project with create-vue — select TypeScript, Vue Router, and Pinia for FamilyTree.
• npm run dev starts a Vite dev server with instant HMR.
• npm run build produces the optimized production bundle.
• Vite uses native ES modules in development — no bundling step means near-instant startup.