Setup Vue.js on Windows

Setting up Vue.js on Windows requires installing Node.js and configuring your development environment. This guide covers the complete setup process.

Prerequisites

Install Node.js and NPM

Method 1: Official Installer (Recommended)

  1. Download from nodejs.org
  2. Download the LTS version
  3. Run the installer with default settings
  4. Restart your computer

Method 2: Using Chocolatey 

choco install nodejs

Method 3: Using Winget 

winget install OpenJS.NodeJS

Verify Installation

Open Command Prompt or PowerShell:

node --version
npm --version

Create Vue.js Project

Using Official Vue CLI 

npm create vue@latest my-vue-app

You’ll see interactive prompts:

  • Project name
  • Add TypeScript? (Optional)
  • Add JSX Support? (Optional)
  • Add Vue Router? (Recommended)
  • Add Pinia? (Recommended)
  • Add Vitest? (For testing)
  • Add End-to-End Testing? (Optional)
  • Add ESLint? (Recommended)

Navigate and Setup 

cd my-vue-app
npm install
npm run dev

Your application opens at http://localhost:5173

Alternative: Vite Template 

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

Development Environment

Visual Studio Code

  1. Download from code.visualstudio.com
  2. Install VS Code
  3. Install essential extensions:
    • Volar (Vue language support)
    • Vue VSCode Snippets
    • Prettier - Code formatter
    • ESLint
    • Auto Rename Tag

Windows Terminal (Recommended)

Install from Microsoft Store for better terminal experience with tabs and PowerShell integration.

Git for Windows

Download from git-scm.com

Browser Developer Tools

Install Vue.js DevTools:

Windows-Specific Configuration

Environment Variables

If Vue.js commands aren’t recognized:

  1. Search “Environment Variables” in Start Menu
  2. Click “Edit the system environment variables”
  3. Click “Environment Variables”
  4. Add to PATH:
    • C:\Program Files\nodejs\
    • C:\Users\YourUsername\AppData\Roaming\npm

PowerShell Profile Setup

Create a PowerShell profile:

# Open PowerShell profile
notepad $PROFILE

# Add useful aliases
Set-Alias -Name vue-dev -Value "npm run dev"
Set-Alias -Name vue-build -Value "npm run build"
Set-Alias -Name vue-test -Value "npm run test"

Advanced Setup

NVM for Windows

For managing multiple Node.js versions:

  1. Download from GitHub
  2. Install NVM4W
  3. Use Node.js versions:
nvm install 18
nvm use 18
nvm alias default 18

Vue CLI Global Installation 

npm install -g @vue/cli
vue create my-project

Vue Router and Pinia 

npm install vue-router@4 pinia

Production Build

Build for Production 

npm run build

Preview Production Build 

npm run preview

Deploy to Netlify (Example) 

npm install -g netlify-cli
netlify deploy --prod --dir=dist

Common Issues and Solutions

Permission Denied Errors 

# Clear npm cache
npm cache clean --force

# Use PowerShell as Administrator

Port Already in Use 

# Find process using port 5173
netstat -ano | findstr :5173

# Kill the process
taskkill /PID <PID_NUMBER> /F

Node.js Version Conflicts 

# Use NVM to switch versions
nvm list
nvm use 18

Yarn Integration (Optional)

Install Yarn as alternative package manager:

npm install -g yarn

Additional Tools

Windows Subsystem for Linux (WSL)

For Linux development environment:

  1. Install WSL from Microsoft Store
  2. Install Ubuntu
  3. Follow Linux setup guide inside WSL

Nuxt.js for Full-Stack Vue 

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev

Vue Testing Setup 

npm install --save-dev @vue/test-utils vitest jsdom

Sources

For other platforms, check our Vue.js Linux setup or Vue.js macOS installation.