Environment and create-vue Project

Introduction

Vue apps run on Node.js for tooling—Vite dev server, TypeScript checking, and production builds. This chapter installs Node, scaffolds a project with create-vue, explains the folder layout, and sets up VS Code for a smooth editing experience.

Prerequisites

• What Is Vue
• Terminal access on Windows, macOS, or Linux
• Helpful: Running JavaScript

Install Node.js

Download Node.js LTS from nodejs.org or use a version manager (nvm, fnm).

Verify:

node -v
npm -v

Code explanation:

• LTS (Long Term Support) is the stable line for most projects
• npm ships with Node; pnpm and yarn are optional alternatives

Create a Vue Project

Official scaffold:

npm create vue@latest

Prompts (recommended for this track):

Then install and run:

cd hello-vue
npm install
npm run dev

Open the URL shown (usually http://localhost:5173).

Code explanation:

• create-vue generates a Vite project—not the old Vue CLI
• Default dev port 5173 differs from Flask 5000 and FastAPI 8000

Compare Vite setup with TypeScript with Vite—that chapter uses a React template; structure is similar.

Project Layout

public/ (if present): static files copied as-is to build output.

Key Scripts

From package.json:

Run production preview after build:

npm run build
npm run preview

Environment Variables

Vite exposes env vars prefixed with VITE_:

.env (local, do not commit secrets):

VITE_API_URL=http://127.0.0.1:8000

.env.example (commit this template):

VITE_API_URL=http://127.0.0.1:8000

Use in code:

const apiUrl = import.meta.env.VITE_API_URL;

VS Code Setup

1. Install Vue - Official extension (formerly Volar)
2. Disable Vetur if installed—conflicts with Vue 3
3. Optional: ESLint, Prettier extensions

Settings that help:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Browser DevTools

Install Vue.js devtools browser extension to inspect:

• Component tree
• Pinia stores (when added)
• Router state

Useful when debugging props and reactivity.

Minimal vite.config.ts Tour

Dev API proxy (avoid CORS in local dev):

Full CORS discussion in Fetching API and CORS.

Post-Setup Checklist

• node -v shows LTS version
• npm create vue@latest completes
• npm run dev opens app in browser
• Vue - Official extension active in VS Code
• .env in .gitignore

FAQ

npm vs pnpm vs yarn?

All work. This track uses npm in examples; teams often pick pnpm for disk efficiency.

Do I need Vue Router and Pinia on day one?

create-vue can add them at scaffold time. You can also npm install later—chapters 14–16 cover setup.

Port 5173 in use?

Stop other Vite apps or set port in vite.config.ts: server: { port: 5174 }.

npm create vue@latest vs npm init vue@latest?

Same scaffold—follow the latest create-vue docs if prompts differ slightly.

Windows path issues?

Use WSL2 or Git Bash; avoid spaces in project path when possible.

Where is index.html entry?

Vite uses index.html at project root—not public/index.html like Create React App.