Creating a Project

npm create vue@latest downloads create-vue, the official project generator, and runs it. Keep the @latest: without it npm can resolve to an older cached copy.

The prompts

It asks for a project name, then which optional pieces to include. TypeScript adds the tsconfig files and a type-check script; this course answers yes. JSX support lets you write render functions in JSX. Vue Router adds client-side routing and Pinia adds a shared store, both in Stage 3. Vitest adds a unit test runner, and the end-to-end option offers Playwright, Cypress or Nightwatch; tests come in Stage 5. ESLint and Prettier add linting and formatting. The Vue DevTools option adds a dev-time inspector plugin. Every answer also exists as a flag, so npm create vue@latest -- --help lists them and lets you skip the questions.

Three commands after that

cd into the new folder, npm install to fetch dependencies, npm run dev to start the dev server. It prints a localhost URL and keeps running until you stop it.

What Vite does

Vite is the build tool the project is wired to. In development it is a server rather than a bundler: it serves your source over native ES modules and compiles each file — every .vue file included — when the browser asks for it, so start-up does not grow with the project. Dependencies are pre-bundled once. Saving a file swaps that one module in the running page and keeps the state you had. npm run build is the bundling step, writing dist/; Vite 8 does it with Rolldown, its Rust bundler.

<script setup lang="ts">
import { ref } from 'vue'

const checks = ref(0)
</script>

<template>
  <h1>The dev server works</h1>
  <button type="button" @click="checks++">
    Checked {{ checks }} times
  </button>
</template>

<style scoped>
h1 {
  font-size: 1.5rem;
}
</style>

# terminal
npm create vue@latest

# answer the prompts, then:
cd my-app
npm install
npm run dev

# when you want the production bundle in dist/
npm run build

# serve that bundle locally to check it
npm run preview

# terminal
# see every feature flag the generator accepts
npm create vue@latest -- --help

# a TypeScript project with routing, no prompts
npm create vue@latest my-app -- --typescript --router

# terminal
$ npm run dev

VITE v8.0.0  ready in 412 ms

Local:   http://localhost:5173/
Network: use --host to expose