Vue + Vite

⚡ What is Vite?

Vite is a modern build tool that provides instant server start, lightning-fast hot module replacement, and optimized production builds. It's the recommended way to build Vue applications today.


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

cd my-vue-app
npm install
npm run dev

Vite Key Features

🚀

Instant Start

Server starts in milliseconds

npm run dev
# Ready in ~100ms!

🔥

Hot Reload

Instant updates without refresh

// Changes reflect instantly
if (import.meta.hot) {
  import.meta.hot.accept()
}

📦

Optimized Build

Fast production bundles

npm run build
# Optimized output

🔌

Plugin System

Extend with plugins

plugins: [
  vue(),
  vueJsx()
]

🔹 Creating a Vite Project

Start a new Vue project with Vite:

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

# Using yarn
yarn create vite my-app --template vue

# Using pnpm
pnpm create vite my-app --template vue

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

Project Structure:

my-app/
├── public/          # Static assets
├── src/
│   ├── assets/      # Images, styles
│   ├── components/  # Vue components
│   ├── App.vue      # Root component
│   └── main.js      # Entry point
├── index.html       # HTML template
├── vite.config.js   # Vite configuration
└── package.json

🔹 Vite Configuration

Customize Vite for your project needs:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  
  // Path aliases
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components')
    }
  },
  
  // Dev server options
  server: {
    port: 3000,
    open: true, // Open browser automatically
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  
  // Build options
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router']
        }
      }
    }
  }
})

🔹 Using Path Aliases

Simplify imports with path aliases:

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

<script setup>
// ❌ Without alias
import Button from '../../../components/ui/Button.vue'

// ✅ With alias
import Button from '@/components/ui/Button.vue'
</script>

🔹 Environment Variables

Manage different configurations for dev and production:

# .env - All environments
VITE_APP_TITLE=My App

# .env.development - Development only
VITE_API_URL=http://localhost:8080

# .env.production - Production only
VITE_API_URL=https://api.example.com

<script setup>
// Access environment variables
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV
const isProd = import.meta.env.PROD

console.log('API URL:', apiUrl)
console.log('Mode:', import.meta.env.MODE)
</script>

⚠️ Important: Only variables prefixed with VITE_ are exposed to your app!

🔹 Static Assets

Handle images, fonts, and other static files:

<script setup>
// Import assets (processed by Vite)
import logo from '@/assets/logo.png'

// Public folder (served as-is)
const icon = '/favicon.ico'
</script>

<template>
  <!-- Imported asset -->
  <img :src="logo" alt="Logo" />
  
  <!-- Public asset -->
  <img src="/images/hero.jpg" alt="Hero" />
  
  <!-- Dynamic import -->
  <img :src="`/images/${imageName}.jpg`" />
</template>

Asset Handling:

src/assets/ - Imported, optimized, hashed filenames
public/ - Served as-is, no processing

🔹 Useful Vite Plugins

Extend Vite with popular plugins:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    
    // JSX support
    vueJsx(),
    
    // Auto-import Vue APIs
    AutoImport({
      imports: ['vue', 'vue-router'],
      dts: 'src/auto-imports.d.ts'
    }),
    
    // Auto-import components
    Components({
      dts: 'src/components.d.ts'
    })
  ]
})

🔹 Build for Production

Optimize your app for deployment:

# Build for production
npm run build

# Preview production build locally
npm run preview

// vite.config.js - Production optimizations
export default defineConfig({
  build: {
    // Minify output
    minify: 'terser',
    
    // Generate sourcemaps
    sourcemap: false,
    
    // Chunk size warnings
    chunkSizeWarningLimit: 500,
    
    // Code splitting
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})