Vue.js: Setup & Hello World

Last updated: 2026-10-20

Setting up a Vue 3 development environment takes just four steps — install Node.js, scaffold with create-vue, start Vite, and open your browser. This lesson takes you from zero to a running Vue app in five minutes.

A Vue app needs three things: Node.js (runtime) + a package manager (npm/pnpm) + a code editor (VS Code recommended). Once those first three are installed, everything else is command-line work.

1. What You'll Learn

• What Node.js is and why front-end development needs it
• npm vs pnpm vs yarn: the differences and how to choose
• How to use the official create-vue scaffolding tool and its options
• How the Vite dev server works and why it is so fast
• Configuring VS Code + the Volar extension (essential for Vue 3)
• The standard five-minute path to a running Hello World

2. A New Hire's Environment Setup

(1) The Pain: 5 Tools, a Full Day of Installing

Alice has just joined a Vue 3 team as a senior front-end developer. On her first day she spends four hours setting up her environment:

• Node.js: the company requires 20.x, she installed 22.x → the project reports "engine not compatible"
• Package manager: the team uses pnpm, her machine only has npm → she cannot run her colleagues' code
• VS Code: no Volar extension → every .vue file is covered in red squiggles
• Vue DevTools: the browser extension is missing → no component tree while debugging
• Git config: username and email are unset → commits show "unknown"

Team lead Charlie sighs:

"Alice, this is exactly why we have a setup.md. Every new hire loses a day setting up their environment. We need one-click configuration."

(2) The Official Vue 3 Answer: 4 Steps, 5 Minutes

# 1. Install Node.js 20.x LTS (nvm recommended for managing multiple versions)
# Mac/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows: download nvm-windows, https://github.com/coreybutler/nvm-windows

# 2. Install pnpm (2x faster than npm, 50% less disk usage)
npm install -g pnpm

# 3. Create a project with create-vue (the official Vue 3 scaffolding tool)
pnpm create vue my-app
# Interactive prompts: TypeScript? Yes / JSX? No / Router? Yes / Pinia? Yes / Vitest? No / E2E? No

# 4. Start the dev server
cd my-app
pnpm install
pnpm dev
# → Open http://localhost:5173 in your browser and see the Vue welcome page

(3) The Payoff

After the team publishes its new "5-minute setup" document, onboarding drops from a full day to 30 minutes:

• Environment setup: 4 hours → 5 minutes (48x faster)
• First commit: day 2 → morning of day 1
• First PR merged: week 1 → day 3
• New-hire satisfaction: 60% → 95% (no more environment anxiety)

3. What Is Node.js and Why Do We Need It?

Node.js is a cross-platform JavaScript runtime that lets JS run locally outside the browser. Front-end development needs it to run build tools such as npm, Vite, and Webpack.

(1) Node.js's Role in Vue Development

graph LR
    subgraph Node.js Ecosystem
        N[Node.js 20+]
        P[npm/pnpm/yarn]
        V[Vite/Webpack]
        T[TypeScript compiler]
    end
    
    subgraph Developer Workflow
        D[Developer]
        I[VS Code + Volar]
        B[Browser]
    end
    
    N --> P
    P --> V
    V --> T
    D --> I
    D --> B
    
    style N fill:#339933,color:#fff
    style P fill:#cb3837,color:#fff
    style V fill:#646cff,color:#fff

graph LR
    subgraph Node.js Ecosystem
        N[Node.js 20+]
        P[npm/pnpm/yarn]
        V[Vite/Webpack]
        T[TypeScript compiler]
    end
    
    subgraph Developer Workflow
        D[Developer]
        I[VS Code + Volar]
        B[Browser]
    end
    
    N --> P
    P --> V
    V --> T
    D --> I
    D --> B
    
    style N fill:#339933,color:#fff
    style P fill:#cb3837,color:#fff
    style V fill:#646cff,color:#fff

(2) Choosing a Node.js Version

(3) Recommended Tool: nvm (Node Version Manager)

nvm lets you install several Node.js versions on one machine and switch between them per project.

# Install nvm
# Mac/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Windows:
# Download nvm-windows: https://github.com/coreybutler/nvm-windows

# Install Node 20 with nvm
nvm install 20
nvm use 20

# Verify
node --version  # v20.x.x
npm --version   # 10.x.x

▶ Example: Installing Node.js 20

# Mac/Linux with nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20

# Windows with nvm-windows, download: https://github.com/coreybutler/nvm-windows
# After installing, open PowerShell:
nvm install 20
nvm use 20

# Verify
node --version  # v20.x.x
npm --version   # 10.x.x

Output:

node --version prints a 20.x version and npm --version prints a 10.x version, confirming Node 20 is the active runtime.

v20.19.0
10.8.2

4. Package Managers: npm vs pnpm vs yarn

(1) The Big Three Compared

(2) Recommendation: pnpm

pnpm is the de facto standard in 2026, because:

• 2-3x faster: hard-link sharing + parallel installation
• 50% less disk: node_modules uses hard links, so nothing is duplicated
• Strict dependencies: phantom dependencies (packages you never declared) are blocked by default
• Monorepo friendly: simple pnpm-workspace.yaml configuration

# Install pnpm
npm install -g pnpm

# Verify
pnpm --version  # 9.x.x

# Install project dependencies
pnpm install    # 2-3x faster than npm install

(3) Install Commands Compared

▶ Example: Installing pnpm Globally

npm install -g pnpm

# Verify
pnpm --version  # 9.x.x or higher

Output:

pnpm is installed globally and pnpm --version prints a 9.x version number.

9.12.3

5. The Official create-vue Scaffolding Tool

Vue 3 officially recommends create-vue for new projects (it replaces the old vue-cli).

(1) Create a Project

# With pnpm (recommended)
pnpm create vue my-vue-app

# With npm
npm create vue@latest my-vue-app

# With yarn
yarn create vue my-vue-app

(2) Interactive Options Explained

(3) Directory Structure After Creation

my-vue-app/
├── public/                  # Static assets
│   └── favicon.ico
├── src/                     # Source code
│   ├── assets/              # Images, fonts
│   ├── components/          # Shared components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   └── icons/
│   ├── router/              # Vue Router config
│   │   └── index.ts
│   ├── stores/              # Pinia stores
│   │   └── counter.ts
│   ├── views/               # Page components
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue              # Root component
│   └── main.ts              # Entry file
├── index.html               # HTML entry
├── package.json             # Project metadata
├── tsconfig.json            # TypeScript config
├── vite.config.ts           # Vite config
└── README.md

▶ Example: Creating a Vue 3 Project

# Go to the directory where you want to create the project
cd ~/projects

# Create the project (interactive mode)
pnpm create vue my-first-vue-app

# Answer the prompts:
# ✅ TypeScript? Yes
# ✅ JSX? No
# ✅ Vue Router? Yes
# ✅ Pinia? Yes
# ✅ Vitest? No
# ✅ E2E? No
# ✅ ESLint? Yes
# ✅ Prettier? Yes

Output:

create-vue scaffolds my-first-vue-app/ with the selected features and prints the next commands to run.

Scaffolding project in ~/projects/my-first-vue-app...

Done. Now run:

  cd my-first-vue-app
  pnpm install
  pnpm dev

6. What Is Vite and Why Is It Faster Than Webpack?

Vite (French for "fast") is the next-generation front-end build tool from the Vue 3 team, and its core advantage is instant cold starts.

(1) Vite vs Webpack Speed

(2) Why Is Vite So Fast?

graph TB
    subgraph Traditional tool Webpack
        W1[Bundles every module at startup]
        W2[Browser receives bundle.js]
        W3[Parses and runs the whole bundle]
    end
    
    subgraph New tool Vite
        V1[No bundling at startup]
        V2[Browser requests ESM modules directly]
        V3[Compiles a single module on demand]
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

graph TB
    subgraph Traditional tool Webpack
        W1[Bundles every module at startup]
        W2[Browser receives bundle.js]
        W3[Parses and runs the whole bundle]
    end
    
    subgraph New tool Vite
        V1[No bundling at startup]
        V2[Browser requests ESM modules directly]
        V3[Compiles a single module on demand]
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

Vite's secrets:

1. Native ESM in dev mode: the browser loads JS directly via <script type="module">, with no bundling
2. On-demand compilation: only the modules the current page actually uses are compiled
3. esbuild dependency pre-bundling: esbuild is written in Go and runs 100x faster than babel in JS
4. Rollup for production: keeps ecosystem compatibility while optimizing the build output

(3) Common Vite Commands

# Start the dev server (hot reload)
pnpm dev

# Production build (outputs to dist/)
pnpm build

# Preview the production build locally
pnpm preview

# Type checking (Vue 3 + TS)
pnpm type-check

▶ Example: Starting and Verifying

# Enter the project directory
cd my-first-vue-app

# Install dependencies
pnpm install

# Start the dev server
pnpm dev

# Terminal output:
#   VITE v5.4.0  ready in 500 ms
#   ➜  Local:   http://localhost:5173/
#   ➜  press h + enter to show help

Output:

Vite reports it is ready in about 500 ms and serves the app at http://localhost:5173/.

  VITE v5.4.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

Open http://localhost:5173/ in your browser and you will see the default Vue welcome page — that is five minutes from zero to running ✅

▶ Example: Changing Your First Line of Code (CDN Version, No Vite Needed)

Below is an equivalent CDN version. No create-vue scaffolding is required — just open the HTML file and you can see your change:

Output:

The page displays "Hello Alice! Welcome to Vue 3!"

After you change the value of msg and save the HTML file, refresh the browser to see the new content. Those 7 lines are your first Vue edit.

Hello Alice! Welcome to Vue 3!
This is your first edit to Vue code

7. VS Code + Volar Setup

(1) Must-Have Extensions

(2) Recommended VS Code Settings

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "eslint.validate": ["javascript", "typescript", "vue"],
  "typescript.tsdk": "node_modules/typescript/lib"
}

(3) 5 Recommended VS Code Shortcuts

▶ Example: Environment Check Command List

# One-shot check that the dev environment is ready
node --version      # should print v18+ or v20+
npm --version       # should print 9+ or 10+
pnpm --version      # should print 8+ or 9+ (if missing: npm i -g pnpm)
git --version       # should print 2.30+
code --version      # should print 1.80+ (if missing: https://code.visualstudio.com)

# List global packages
npm list -g --depth=0

Output:

Each command prints a version number.
If any one reports "command not found", that tool still needs to be installed before moving on.

v20.19.0
10.8.2
9.12.3
git version 2.45.2.windows.1
1.92.0

8. Putting It Together: Vue 3 Running in 5 Minutes

▶ Example: Hello World 5-Step Flow

sequenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browser
    
    D->>N: 1. Install Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate project skeleton
    D->>N: 3. pnpm install
    N-->>D: Install dependencies (30s)
    D->>V: 4. pnpm dev
    V-->>B: 5. http://localhost:5173
    B-->>D: Vue welcome page
    D->>D: Change 1 line of code
    D->>B: Auto-refresh after save

sequenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browser
    
    D->>N: 1. Install Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate project skeleton
    D->>N: 3. pnpm install
    N-->>D: Install dependencies (30s)
    D->>V: 4. pnpm dev
    V-->>B: 5. http://localhost:5173
    B-->>D: Vue welcome page
    D->>D: Change 1 line of code
    D->>B: Auto-refresh after save

Output:

A sequence diagram that walks from installing Node 20 through create-vue, dependency installation, and pnpm dev to the browser rendering the welcome page and refreshing after one edit.

Developer → Node.js: install Node 20 → returns v20.x.x
Developer → create-vue: pnpm create vue my-app → project skeleton generated
Developer → Node.js: pnpm install → dependencies installed (30s)
Developer → Vite: pnpm dev
Vite → Browser: http://localhost:5173
Browser → Developer: Vue welcome page
Developer → Developer: change 1 line of code
Developer → Browser: save and the page auto-refreshes

❓ FAQ

📖 Summary

• Vue 3 development needs four pieces: Node.js 20+, a package manager (pnpm recommended), the create-vue scaffolding tool, and VS Code + Volar
• Node.js 20.x LTS is the first choice for new projects in 2026
• pnpm is 2-3x faster than npm and saves 50% disk — the de facto standard in 2026
• create-vue is the official Vue 3 scaffolding tool, replacing the old vue-cli
• Vite is the Vue team's next-generation build tool, with cold starts 30x faster than Webpack
• VS Code + the Volar extension is the standard Vue 3 setup
• Hello World in five minutes: install Node → install pnpm → create-vue → pnpm install → pnpm dev

📝 Exercises

1. Basic (⭐) Follow this lesson to build a Vue 3 project called my-first-vue from scratch, get pnpm dev running, and see the welcome page. Screenshot the terminal output (including the Node, pnpm, and Vite versions).

2. Intermediate (⭐⭐) Use create-vue to create a project named my-fullstack-vue with these options:

   • TypeScript: Yes
   • Vue Router: Yes
   • Pinia: Yes
   • Vitest: Yes
   • ESLint: Yes
   • Prettier: Yes

   Once it runs, change the title in src/views/HomeView.vue to "Hello Alice!" and note which lines you changed.

3. Challenge (⭐⭐⭐) Compare the developer experience of Vite and Webpack:

   1. Measure cold start time (Vite vs Webpack 5)
   2. Measure hot update time (time to refresh the browser after changing one line)
   3. Draw a comparison diagram with mermaid and write a 500-word experience report

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us