Vue.js on localhost

http://localhost:8080

Vue.js development server runs on port 8080 (Vue CLI) or port 5173 (Vite) by default with hot module replacement and instant reloading.

→ Open localhost:8080

Create Vue.js Project

Method 1: Vue CLI

# Install Vue CLI globally
npm install -g @vue/cli

# Verify installation
vue --version

# Create new project
vue create my-vue-app

# Navigate into project
cd my-vue-app

# Start development server
npm run serve

# Opens at http://localhost:8080
    

Method 2: Vite (Recommended for Vue 3)

# Create project with Vite
npm create vite@latest my-vue-app -- --template vue

# Or interactive setup
npm create vite@latest

# Navigate and install
cd my-vue-app
npm install

# Start dev server
npm run dev

# Opens at http://localhost:5173
    

Vue CLI Commands

# Start development server
npm run serve

# Build for production
npm run build

# Run linter
npm run lint

# Run unit tests
npm run test:unit

# Run end-to-end tests
npm run test:e2e
    

Vite Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

# Type checking (TypeScript)
npm run type-check
    

Vue Project Structure

Vue CLI Project

my-vue-app/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/          # Static assets
│   ├── components/      # Vue components
│   │   └── HelloWorld.vue
│   ├── views/          # Page components
│   ├── router/         # Vue Router config
│   ├── store/          # Vuex/Pinia store
│   ├── App.vue         # Root component
│   └── main.js         # Entry point
├── tests/
├── .gitignore
├── babel.config.js
├── package.json
└── vue.config.js       # Vue CLI config
    

Vite Project

my-vue-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html          # Entry HTML (different location)
├── package.json
└── vite.config.js      # Vite config
    

Change Development Port

Vue CLI (vue.config.js)

Create or edit vue.config.js in project root:

module.exports = {
  devServer: {
    port: 3000,
    host: 'localhost',
    open: true,  // Auto-open browser
    https: false
  }
}
    

Vite (vite.config.js)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    host: 'localhost',
    open: true,  // Auto-open browser
    strictPort: false  // Try next port if occupied
  }
})
    

Command Line Override

# Vue CLI
npm run serve -- --port 3000

# Vite
npm run dev -- --port 3000

# Or set in package.json
{
  "scripts": {
    "dev": "vite --port 3000"
  }
}
    

Vue Single File Components

Vue components use .vue extension:

<!-- src/components/MyComponent.vue -->
<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  

Vue 3 Composition API

<!-- src/components/Counter.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  

Vue Router Setup

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// Access routes:
// http://localhost:8080/
// http://localhost:8080/about
    

Vue Development Features

Hot Module Replacement (HMR) - Instant updates without full reload
Component Hot Reload - Preserve component state during updates
Vue Devtools - Browser extension for debugging
Fast Refresh - Lightning-fast with Vite
Error Overlay - Visual error display in browser
Source Maps - Debug original source in browser

Install Vue Devtools

Install browser extension:
- Chrome: Search "Vue.js devtools" in Chrome Web Store
- Firefox: Search in Firefox Add-ons
- Edge: Search in Edge Add-ons
Enable extension
Visit Vue app at localhost:8080
Open browser DevTools (F12)
Find "Vue" tab

Fix "Vue Dev Server Not Working"

Issue: Port 8080 already in use

# Find what's using port 8080
# Windows
netstat -ano | findstr :8080

# Linux/Mac
lsof -i :8080

# Change port in config or use different port
npm run serve -- --port 3000
    

Issue: Module not found errors

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Or use npm ci for clean install
npm ci
    

Issue: Hot reload not working

Check file is saving (Ctrl+S)
Verify file is in src/ directory
Restart dev server
Clear browser cache

Issue: White screen / blank page

Check browser console for errors
Verify main.js has no syntax errors
Check App.vue is properly imported
Ensure mounting element exists

Build for Production

# Build production files
npm run build

# Output directory:
# Vue CLI: dist/
# Vite: dist/

# Files are optimized and minified
# Ready for deployment

# Preview production build locally
# Vite only:
npm run preview
# Opens at http://localhost:4173
    

Vue CLI vs Vite Comparison

Feature	Vue CLI	Vite
Default Port	8080	5173
Startup Speed	Slower	Much faster
Hot Reload	Good	Instant
Build Tool	Webpack	Rollup
Recommended For	Vue 2 projects	Vue 3 projects

Recommendation: For new Vue 3 projects, use Vite for significantly faster development experience. For Vue 2 or existing projects, Vue CLI remains fully supported.

Frequently Asked Questions

What port does Vue use?

Vue CLI uses port 8080 by default. Vite uses port 5173. Both can be changed in configuration files.

Should I use Vue CLI or Vite?

For Vue 3 projects, Vite is recommended for faster development. For Vue 2 or existing projects, continue using Vue CLI.

Can I use Vue without CLI?

Yes, include Vue via CDN in HTML. However, CLI/Vite provide better development experience with hot reload, build tools, and npm ecosystem.

How do I deploy Vue from localhost?

Run npm run build, then upload the dist/ folder contents to your web server. Configure server to redirect all routes to index.html for SPA routing.

Related Resources

localhost:8080 - Vue CLI port
localhost:5173 - Vite port
localhost:3000 - Alternative port
localhost:4200 - Angular port