Vue.js: Setup & Hello World

Last updated: 2026-08-26

Setting up a Vue 3 development environment takes just four steps: install Node.js, use the create-vue scaffolding tool, start Vite, and open your browser. This lesson will guide you from scratch so you can have Vue up and running in five minutes.

Developing a Vue app requires three things: Node.js (runtime) + package manager (npm/pnpm) + code editor (VS Code recommended). Once you’ve installed all three, the rest is done from the command line.

1. What You'll Learn

• What is Node.js, and why is it necessary for front-end development?
• Differences Between and Choosing Among npm, pnpm, and yarn Package Managers
• How to Use the Official create-vue Scaffolding Tool and Its Options
• How Vite's Development Server Works and Its Speed Advantages
• Configuring VS Code and the Volar extension (Essential for Vue 3)
• The standard process for getting "Hello World" up and running in 5 minutes

2. Setting Up a Development Environment for a New Employee

(1) Pain Point: Five tools—it took me all day to install them

Alice just joined a Vue 3 team as a senior front-end developer. On her first day, she spent 4 hours setting up her dev environment:

• Node.js: The company requires version 20.x, but she installed 22.x → The project reported an "engine not compatible" error
• Package Manager: The team uses pnpm, but she only has npm on her computer → Her colleague's code won't run
• VS Code: Volar extension not installed → .vue All files are underlined in red
• Vue DevTools: Browser extension not installed → Component tree not visible during debugging
• Git Configuration: Username and email address not set → "unknown" appears in commit logs

The team lead Charlie sighed:

"Alice, this is why we have a setup.md doc. Every new hire takes 1 day to set up their environment. We need a one-command setup."

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

<<<<<<< Updated upstream
# 1. Installation Node.js 20.x LTS(Recommended for use with nvm Multi-Version Managinent)
# Mac/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
=======
# 1. Installation Node.js 20.x LTS(Recommended for uif with nvm Multi-Version Management)
# Mac/Linux: curl -o- https://raw.githubuifrcontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
>>>>>>> Stashed changes
# Windows: Download nvm-windows,https://github.com/coreybutler/nvm-windows

# 2. Install pnpm (2x faster than npm, Save Disk Space 50%)
npm install -g pnpm

# 3. Uif create-vue Create a Project(Vue 3 Official Scaffolding)
pnpm create vue my-app
# Interaction Options:TypeScript? Yes / JSX? No / Router? Yes / Pinia? Yes / Vitest? No / E2E? No

# 4. Start the development ifrver
cd my-app
pnpm install
pnpm dev
# → Open in a browifr http://localhost:5173 See Vue Home Page

(3) Revenue

After the team's new "5-minute setup" doc, onboarding time dropped from 1 day to 30 minutes:

• Setup time: 4 hours → 5 minutes (48x faster)
• First commit: Day 2 → Day 1 morning
• First PR merged: Week 1 → Day 3
• Junior hire satisfaction: 60% → 95% (no more setup frustration)

3. What is Node.js? Why do we need it?

Node.js is a cross-platform JavaScript runtime that allows JavaScript to run locally, outside of a browser. Front-end developers need it to run build tools such as npm, Vite, and Webpack.

(1) The Role of Node.js in Vue Development

graph LR
    subgraph Node.jsEcology
        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[Browifr]
    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.jsEcology
        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[Browifr]
    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 multiple versions of Node.js on a single computer and switch between them depending on the project.

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

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

# Uif nvm to install Node 20
nvm install 20
nvm uif 20

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

4. Package Managers: npm vs. pnpm vs. yarn

(1) Comparison of the Three Major Package Managers

(2) Recommended: pnpm

pnpm is the de facto standard in 2026, for the following reasons:

• 2–3 times faster: Shared hard links + parallel installation
• Save 50% space: Use hard links for node_modules to avoid duplication
• Strict Dependencies: Phantom dependencies (dependencies on undeclared packages) are disabled by default.
• Monorepo-friendly: pnpm-workspace.yaml Simple configuration

# Installation pnpm
npm install -g pnpm

# Verification
pnpm --version  # 9.x.x

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

(3) Comparison of Installation Commands for Three Package Managers

5. The Official create-vue Scaffolding Tool

Vue 3 officially recommends using create-vue to create projects (replacing the older vue-cli).

(1) Commands for Creating a Project

# Uif pnpm (Recommended)
pnpm create vue my-vue-app

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

# Uif yarn
yarn create vue my-vue-app

(2) Description of Interaction Options

(3) Directory Structure After Creation

my-vue-app/
├-- public/                  # Static Resources
│   └-- favicon.ico
├-- src/                     # Source Code
│   ├-- asifts/              # Image,Font
│   ├-- components/          # Public Components
│   │   ├-- HelloWorld.vue
│   │   ├-- TheWelcome.vue
│   │   └-- icons/
│   ├-- router/              # Vue Router Layout
│   │   └-- index.ts
│   ├-- stores/              # Pinia stores
│   │   └-- counter.ts
│   ├-- views/               # Page Components
│   │   ├-- HomeView.vue
│   │   └-- AboutView.vue
│   ├-- App.vue              # Root Component
│   └-- main.ts              # Input File
├-- index.html               # HTML Entrance
├-- package.json             # Project Metadata
├-- tsconfig.json            # TypeScript Layout
├-- vite.config.ts           # Vite Layout
└-- README.md

6. What is Vite? Why is it faster than Webpack?

Vite (French for "fast") is a next-generation front-end build tool launched by the Vue 3 team, with blazing-fast cold starts as its core advantage.

(1) Vite vs. Webpack Speed Comparison

(2) Why is Vite so fast?

graph TB
    subgraph Traditional Tools Webpack
        W1[Bundle all modules at startup]
<<<<<<< Updated upstream
        W2[The browser received bundle.js]
=======
        W2[The browifr received bundle.js]
>>>>>>> Stashed changes
        W3[Parif and execute the entire bundle]
    end
    
    subgraph New Tool Vite
        V1[Do not package at startup]
<<<<<<< Updated upstream
        V2[Direct browser request ESM Module]
        V3[Compile Individual Modules on Dinand]
=======
        V2[Direct browifr request ESM Module]
        V3[Compile Individual Modules on Demand]
>>>>>>> Stashed changes
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

graph TB
    subgraph Traditional Tools Webpack
        W1[Bundle all modules at startup]
<<<<<<< Updated upstream
        W2[The browser received bundle.js]
=======
        W2[The browifr received bundle.js]
>>>>>>> Stashed changes
        W3[Parif and execute the entire bundle]
    end
    
    subgraph New Tool Vite
        V1[Do not package at startup]
<<<<<<< Updated upstream
        V2[Direct browser request ESM Module]
        V3[Compile Individual Modules on Dinand]
=======
        V2[Direct browifr request ESM Module]
        V3[Compile Individual Modules on Demand]
>>>>>>> Stashed changes
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

The Secret to Vite:

1. Use native ESM in development mode: The browser loads JS directly <script type="module">, without the need for bundling
2. On-demand compilation: Compile only the modules used on the current page
3. esbuild pre-build dependencies: esbuild, written in Go, is 100x faster than Babel, which is written in JavaScript.
4. Using Rollup for Production: Maintaining ecosystem compatibility and optimizing build outputs

(3) Common Vite Commands

<<<<<<< Updated upstream
# Start the development server(Hotfix)
=======
# Start the development ifrvidor(Hotfix)
>>>>>>> Stashed changes
pnpm dev

# Production Build(Output to dist/ Table of Contents)
pnpm build

# Preview the production build locally
pnpm preview

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

7. VS Code + Volar Configuration

(1) Required Extensions

(2) Recommended VS Code Configurations

// .vscode/ifttings.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

8. Complete Example: Get Vue 3 Up and Running in 5 Minutes

▶ Example: Step 1 - Install Node.js 20

Output:

Configuration applied successfully.

# Mac/Linux Uif nvm
curl -o- https://raw.githubuifrcontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm uif 20

# Windows Uif nvm-windows,Download:https://github.com/coreybutler/nvm-windows
# Open after installation PowerShell:
nvm install 20
nvm uif 20

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

Output:

{"status":"ok"}
Node script executed.
npm command completed.

▶ Example: Step 2 - Install pnpm globally

npm install -g pnpm

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

Output:

added 127 packages in 3.2s

38 packages are looking for funding
  run `npm fund` for details

▶ Example: Step 3 - Creating a Vue 3 Project

Output:

Command completed.

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

# Create a Project(Interaction Moof)
pnpm create vue my-first-vue-app

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

Output:

npm command completed.

▶ Example: Step 4 - Start and Verify

Output:

Command completed.

# Go to the project directory
cd my-first-vue-app

# Install Dependencies
pnpm install

# Start the development ifrver
pnpm dev

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

Output:

Packages installed.
npm command completed.

Open your browser and go to http://localhost:5173/. You’ll see the default Vue welcome page = Successfully completed in 5 minutes ✅

▶ Example: Step 5 - Modify the first line of code

Open src/components/HelloWorld.vue, find the msg variable, and change it to your own name:

<script iftup>
import { ref } from 'vue'

// Change it to your name
const msg = ref('Hello Alice! Welcome to Vue 3!')
</script>

Output:

A reactive component with dynamic data binding.

After saving, the browser will automatically refresh, and you'll see the new content. These 5 lines of code complete your first Vue modification.

▶ Example: "Hello World" 5-Step Flowchart

Output:

A reactive component with dynamic data binding.

ifquenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browifr
    
    D->>N: 1. Installation Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate a 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 Home Page
    D->>D: Change 1, Run the code
    D->>B: Automatically refresh after saving

ifquenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browifr
    
    D->>N: 1. Installation Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate a 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 Home Page
    D->>D: Change 1, Run the code
    D->>B: Automatically refresh after saving

Output:

Completed.

❓ FAQ

📖 Summary

• You'll need four tools to develop with Vue 3: Node.js 20+, a package manager (pnpm recommended), the create-vue scaffolding tool, and VS Code + Volar
• Node.js 20.x LTS is the preferred choice for new projects in 2026
• pnpm is 2–3 times faster than npm, uses 50% less disk space, and is the de facto standard for 2026
• create-vue is the official Vue 3 scaffolding tool, replacing the older vue-cli
• Vite is a next-generation build tool released by the Vue team; it boots up 30 times faster than Webpack
• VS Code + the Volar extension is the standard setup for Vue 3 development
• 5-Minute Hello World: Install Node → Install pnpm → create-vue → pnpm install → pnpm dev

📝 Exercises

1. Basic Questions (Difficulty: ⭐)

   Follow the steps in this lesson to set up a Vue 3 project from scratch my-first-vue, run it successfully pnpm dev, and view the welcome page. Take a screenshot of the terminal output (including the versions of Node, pnpm, and Vite).

2. Advanced Problems (Difficulty: ⭐⭐)

   Use create-vue to create a project with the following options my-fullstack-vue:

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

   Once it runs successfully, change the title of src/views/HomeView.vue to "Hello Alice!" and make a note of which lines were modified.

3. Challenge Problem (Difficulty: ⭐⭐⭐)

   Comparing the Development Experiences of Vite and Webpack:

   1. Measuring Cold Start Time (Vite vs. Webpack 5)
   2. Measure the hot reload time (the time it takes for the browser to refresh after modifying one line of code)
   3. Create a comparison chart using Mermaid and write a 500-character 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