Installation Guide

Get started with your Vue 3 application

System Requirements

Before installing, ensure you have the following installed:

Node.js

Version 16.0 or higher recommended

# Check Node.js version
node --version

# Should output: v16.0.0 or higher
Package Manager

NPM, Yarn, or PNPM

# Check package manager version
npm --version
yarn --version
pnpm --version
Download Node.js: Visit nodejs.org to download and install the latest LTS version.

Create Vue App

The official way to create a new Vue 3 project using create-vue.

Quick Start

# Create new Vue 3 app
npm create vue@latest my-app

# You will be prompted to configure:
# - TypeScript support
# - JSX support
# - Vue Router
# - Pinia (state management)
# - Vitest (testing)
# - ESLint
# - Prettier

Installation Steps

# Navigate to project
cd my-app

# Install dependencies
npm install

# Start development server
npm run dev
Recommended Configuration

For most projects, we recommend:

  • TypeScript: Yes (for better type safety)
  • JSX: No (unless you need it)
  • Vue Router: Yes (for navigation)
  • Pinia: Yes (for state management)
  • Vitest: Yes (for testing)
  • ESLint & Prettier: Yes (for code quality)

Vite with Vue

Vue 3 projects use Vite as the default build tool for lightning-fast development.

Manual Vite + Vue Setup

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

# Or with TypeScript
npm create vite@latest my-vue-app -- --template vue-ts

# Install and run
cd my-vue-app
npm install
npm run dev

Using Different Package Managers

# Yarn
yarn create vite my-vue-app --template vue
cd my-vue-app
yarn
yarn dev

# PNPM
pnpm create vite my-vue-app --template vue
cd my-vue-app
pnpm install
pnpm dev
Why Vite?
  • Instant server start and lightning-fast HMR
  • Optimized build with Rollup
  • Native ES modules in development
  • Out-of-the-box TypeScript support
  • Rich plugin ecosystem
  • Official Vue.js recommendation

Installing Dependencies

Essential Packages

# Vue Router for navigation
npm install vue-router@4

# Pinia for state management
npm install pinia

# Axios for HTTP requests
npm install axios

# VueUse - Collection of Vue Composition utilities
npm install @vueuse/core

# UI Component Library - Vuetify
npm install vuetify@next

# Or Element Plus
npm install element-plus

Development Dependencies

# Vitest for testing
npm install --save-dev vitest @vue/test-utils

# TypeScript (if not already installed)
npm install --save-dev typescript vue-tsc

# ESLint and Prettier
npm install --save-dev eslint prettier eslint-plugin-vue

# Vue DevTools
npm install --save-dev @vue/devtools

Common Dependencies Table

Package Purpose Installation
vue-router Official routing library npm install vue-router@4
pinia Official state management npm install pinia
axios HTTP client npm install axios
@vueuse/core Composition utilities npm install @vueuse/core
vuelidate Form validation npm install @vuelidate/core @vuelidate/validators

Development Server

Start Development Server

# Start dev server (Vite)
npm run dev

# With custom host and port
npm run dev -- --host 0.0.0.0 --port 3000
Your app will be available at http://localhost:5173 (default Vite port)

Available Scripts

Command Description
npm run dev Starts development server with hot reload
npm run build Creates optimized production build
npm run preview Preview production build locally
npm run test:unit Runs unit tests with Vitest
npm run lint Runs ESLint to check code quality
npm run format Formats code with Prettier

Project Structure

my-vue-app/
├── public/               # Static assets
├── src/
│   ├── assets/          # Images, styles, etc.
│   ├── components/      # Vue components
│   ├── composables/     # Composition functions
│   ├── router/          # Vue Router config
│   ├── stores/          # Pinia stores
│   ├── views/           # Page components
│   ├── App.vue          # Root component
│   └── main.js          # Entry point
├── index.html
├── vite.config.js       # Vite configuration
└── package.json

Production Build

Build for Production

# Create optimized production build
npm run build

# Build output will be in 'dist/' folder

# Preview production build
npm run preview

Build Optimization

  • Automatic code splitting
  • Tree-shaking for smaller bundles
  • Asset optimization (images, CSS, JS)
  • Source maps for debugging
  • CSS extraction and minification

Deploy to Production

Vercel
npm install -g vercel
vercel
Netlify
npm install -g netlify-cli
netlify deploy
GitHub Pages
npm install --save-dev gh-pages
npm run deploy

Environment Variables

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Vue App

# Access in code
console.log(import.meta.env.VITE_API_URL)
Important: Only environment variables prefixed with VITE_ are exposed to your app.