Installing & First App With Vite

Use create-vue (Vite-based) to scaffold a new Vue 3 project with TypeScript and the modern toolchain.

4 min read Level 1/5 #vue#install#vite

What you'll learn

Install Node
Run `npm create vue@latest`
Start the dev server

The official way to start a Vue project is create-vue, which scaffolds a Vite-powered app with sensible defaults. You’ll have a running dev server in under a minute.

Prerequisites

You need Node.js 20.19+ or 22.12+. Verify with:

node --version
npm --version

Scaffold the App

Run the official initializer. It prompts for TypeScript, JSX, Vue Router, Pinia, testing, and ESLint — pick what you want.

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

Open http://localhost:5173 — you’ll see a starter page with hot module reload baked in.

What Got Generated

The important files:

my-app/
  index.html         # entry HTML — mounts #app
  src/
    main.ts          # createApp(App).mount('#app')
    App.vue          # root component
    components/      # your SFCs go here
  vite.config.ts     # build & dev config
  package.json

Useful Scripts

npm run dev      # start dev server with HMR
npm run build    # production build to dist/
npm run preview  # serve the production build locally

Single-File Components →