Lightning Fast Development with Vite! ⚡

You've just experienced Vue with build tools, but now let's discover Vite (pronounced "veet" 🇫🇷) - the lightning-fast build tool that's revolutionizing how we develop web applications. Vite makes development so fast and smooth, you'll wonder how you ever coded without it!

What You'll Discover Today

What Vite is and why it's a game-changer
Lightning-fast development with instant hot reload
Modern JavaScript features out of the box
Optimized production builds for deployment
The difference between development and production modes

What is Vite? 🚀

Vite (French for "quick") is a build tool that provides:

⚡ Ultra-fast development server with instant Hot Module Replacement (HMR)
📦 Optimized production builds using Rollup bundling
🎯 Modern JavaScript support without configuration
🔧 Rich plugin ecosystem for any framework

Think of Vite as your development supercharger - it makes everything faster and more enjoyable!

The Vite Magic: Development vs Production

🔧 Development Mode (What You Experience)

Native ES modules - no bundling needed
Instant server start - ready in milliseconds
Lightning HMR - changes appear instantly
On-demand compilation - only builds what you need

📦 Production Mode (What Users Get)

Optimized bundles with Rollup
Code splitting for faster loading
Asset optimization (images, CSS, JS)
Modern browser support with legacy fallbacks

Creating Your First Vite Project

Method 1: The Vue Way (Recommended)

This uses create-vue which includes Vite automatically:

bash

# Create Vue project with Vite (this is what you did in project 07!)
npm create vue@latest my-vite-app

cd my-vite-app
npm install
npm run dev

Method 2: Pure Vite with Vue Template

This uses Vite directly with a Vue template:

bash

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

cd my-vite-vue-app
npm install
npm run dev

Method 3: Interactive Setup

Let Vite ask you what you want:

bash

# Interactive project creation
npm create vite@latest

# Follow the prompts:
# ✔ Project name: … my-awesome-app
# ✔ Select a framework: › Vue
# ✔ Select a variant: › JavaScript

All methods give you Vite power! 🎯

Vite Project Structure Deep Dive

my-vite-app/
├── public/
│   └── favicon.ico          # Static assets (copied as-is)
├── src/
│   ├── assets/             # Processed assets (images, styles)
│   ├── components/         # Vue components
│   ├── App.vue            # Root component  
│   ├── main.js            # App entry point
│   └── style.css          # Global styles
├── index.html             # Entry point (front and center!)
├── package.json           # Dependencies and scripts
├── vite.config.js         # Vite configuration
└── README.md

🎯 Key Difference: `index.html` is Front and Center

Traditional bundlers: Hide index.html in a public/ folder
Vite: index.html is your app's entry point at the root

html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Notice: <script type="module"> - Vite serves your JavaScript as modern ES modules!

Understanding Vite's Speed Secrets

🚀 Why Vite is So Fast

1. Native ES Modules in Development

javascript

// Instead of bundling everything together (slow)
// Vite serves each file separately (fast!)

// main.js
import { createApp } from 'vue'           // From node_modules
import App from './App.vue'              // Your component
import './style.css'                     // Your styles

// Browser loads each file as needed - no bundling step!

2. On-Demand Compilation

Traditional bundlers: Bundle everything, then serve
Vite: Serve immediately, compile on request
Result: Instant server start! ⚡

3. Smart Hot Module Replacement

javascript

// When you edit a Vue component:
// 1. Vite detects the change instantly
// 2. Only recompiles that specific component  
// 3. Browser updates without page refresh
// 4. Component state is preserved!

4. Dependency Pre-bundling

javascript

// Vite pre-bundles node_modules dependencies
// Uses esbuild (written in Go) - incredibly fast!
// Cache them until they change
// Result: Fast subsequent starts

Essential Vite Commands

bash

# Development server (ultra-fast start)
npm run dev
# or
npx vite

# Production build (optimized for deployment)
npm run build
# or  
npx vite build

# Preview production build locally
npm run preview
# or
npx vite preview

# Development server with custom port
npx vite --port 3000

# Development server that opens browser automatically
npx vite --open

# Show help with all options
npx vite --help

Vite Configuration: `vite.config.js`

Basic Vite configuration for Vue:

javascript

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

export default defineConfig({
  plugins: [vue()],
  
  // Development server options
  server: {
    port: 3000,        // Custom port
    open: true,        // Auto-open browser
    host: true         // Allow external connections
  },
  
  // Build options
  build: {
    outDir: 'dist',    // Output directory
    sourcemap: true    // Generate source maps
  },
  
  // Path aliases (shortcuts for imports)
  resolve: {
    alias: {
      '@': '/src'      // Use @/components/MyComponent.vue
    }
  }
})

Advanced Vite Features

1. Environment Variables

bash

# .env file
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=My Awesome App

javascript

// Use in your Vue components
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// Built-in variables
console.log(import.meta.env.MODE)  // 'development' or 'production'
console.log(import.meta.env.DEV)   // true in development
console.log(import.meta.env.PROD)  // true in production

Important: Environment variables must start with VITE_ to be exposed to your app!

2. Asset Handling

javascript

// Static assets (in public/)
// URL: /favicon.ico
const faviconUrl = '/favicon.ico'

// Processed assets (in src/assets/)
// Vite processes these and gives them hash names
import logoUrl from '@/assets/logo.png'

// Dynamic asset imports
const getImageUrl = (name) => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href
}

3. CSS Features

vue

<style>
/* PostCSS features work out of the box */
.my-class {
  display: flex;
  gap: 1rem;  /* Modern CSS, Vite handles browser support */
}

/* CSS Modules */
:global(.global-class) {
  color: red;
}
</style>

<!-- CSS Modules in script -->
<script setup>
import styles from './component.module.css'
// Use: styles.myClass
</script>

4. Modern JavaScript Features

javascript

// All of these work out of the box in Vite:

// ES Modules
import { ref } from 'vue'
export default { /* ... */ }

// Optional chaining
const userName = user?.profile?.name

// Nullish coalescing
const title = pageTitle ?? 'Default Title'

// Top-level await (in async contexts)
const data = await fetch('/api/data')

// Dynamic imports (code splitting)
const MyComponent = () => import('./MyComponent.vue')

Comparing Vite to Traditional Bundlers

Feature	Traditional Bundlers	Vite
Dev Server Start	30-60 seconds	~200ms
Hot Reload	1-3 seconds	~50ms
JavaScript Support	Needs configuration	Modern features out of the box
CSS Processing	Complex setup	Built-in PostCSS, modules, etc.
Asset Handling	Manual configuration	Automatic optimization
Bundle Size	Often larger	Optimized with tree-shaking

Building for Production

When you run npm run build, Vite:

Bundles your code with Rollup (different tool for production)
Optimizes assets (minification, compression)
Code splits automatically for better loading
Generates modern builds with legacy fallbacks
Creates a dist/ folder ready for deployment

bash

npm run build

# Output:
dist/
├── assets/
│   ├── index-abc123.css     # Minified styles
│   └── index-def456.js      # Optimized JavaScript
├── favicon.ico
└── index.html               # Entry point

Real-World Vite Example

Let's create a feature-rich Vue component that showcases Vite's capabilities:

`src/components/ViteShowcase.vue`

vue

<template>
  <div class="vite-showcase">
    <h2>🚀 Vite Feature Showcase</h2>
    
    <!-- Environment Variables -->
    <div class="feature-section">
      <h3>Environment Variables</h3>
      <p>Mode: {{ mode }}</p>
      <p>API URL: {{ apiUrl }}</p>
      <p>Is Development: {{ isDev }}</p>
    </div>
    
    <!-- Dynamic Asset Loading -->
    <div class="feature-section">
      <h3>Dynamic Assets</h3>
      <img :src="logoUrl" alt="Vue logo" class="logo">
      <button @click="loadRandomImage">Load Random Image</button>
      <img v-if="randomImage" :src="randomImage" alt="Random" class="random-img">
    </div>
    
    <!-- Hot Reload Demo -->
    <div class="feature-section">
      <h3>Hot Reload Magic</h3>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
      <p class="hot-reload-tip">
        💡 Try editing this component while the counter is running - 
        your state will be preserved!
      </p>
    </div>
    
    <!-- Modern JavaScript Features -->
    <div class="feature-section">
      <h3>Modern JavaScript</h3>
      <p>Optional chaining: {{ user?.profile?.name ?? 'No user' }}</p>
      <p>Nullish coalescing: {{ title ?? 'Default Title' }}</p>
      <button @click="loadAsyncData">Load Async Data</button>
      <p v-if="asyncData">{{ asyncData }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import logoUrl from '@/assets/vue.svg'

// Environment variables
const mode = import.meta.env.MODE
const apiUrl = import.meta.env.VITE_API_URL || 'No API URL set'
const isDev = import.meta.env.DEV

// Reactive state
const count = ref(0)
const randomImage = ref(null)
const asyncData = ref(null)

// User data for modern JS demo
const user = ref({
  profile: {
    name: 'Vue Developer'
  }
})

const title = ref(null) // Will use nullish coalescing

// Methods
const increment = () => {
  count.value++
}

const loadRandomImage = async () => {
  // Dynamic import example
  const imageNumber = Math.floor(Math.random() * 3) + 1
  try {
    const imageModule = await import(`@/assets/images/demo-${imageNumber}.jpg`)
    randomImage.value = imageModule.default
  } catch (error) {
    console.log('Image not found, using placeholder')
    randomImage.value = 'https://via.placeholder.com/150x150?text=Demo'
  }
}

const loadAsyncData = async () => {
  // Simulate API call
  asyncData.value = 'Loading...'
  
  // Simulate delay
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  asyncData.value = 'Data loaded with modern async/await!'
}

// Lifecycle
onMounted(() => {
  console.log('🚀 Vite showcase component mounted!')
})
</script>

<style scoped>
.vite-showcase {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
}

.feature-section {
  background: #f8f9fa;
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  border-left: 4px solid #42b883;
}

.feature-section h3 {
  margin-top: 0;
  color: #2c3e50;
}

.logo {
  width: 50px;
  height: 50px;
  margin: 0 1rem;
}

.random-img {
  max-width: 150px;
  margin: 1rem;
  border-radius: 8px;
}

button {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin: 0.5rem;
  transition: background-color 0.2s;
}

button:hover {
  background: #369870;
}

.hot-reload-tip {
  background: #e7f3ff;
  padding: 1rem;
  border-radius: 4px;
  border-left: 3px solid #0066cc;
  font-style: italic;
}
</style>

Add to `src/App.vue`

vue

<template>
  <div id="app">
    <ViteShowcase />
  </div>
</template>

<script setup>
import ViteShowcase from './components/ViteShowcase.vue'
</script>

Create `.env` file

bash

# .env
VITE_API_URL=http://localhost:3000/api
VITE_APP_TITLE=My Vite Vue App

Debugging with Vite

1. Vue DevTools

Vite works perfectly with Vue DevTools browser extension for debugging.

2. Source Maps

Source maps are enabled by default, so you can debug your original source code.

3. Console Debugging

javascript

// Development-only logging
if (import.meta.env.DEV) {
  console.log('Debug info:', someData)
}

4. Network Tab

In browser dev tools, you can see individual module loads - great for understanding what's happening!

Performance Tips

1. Lazy Loading Routes

javascript

// router/index.js
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue') // Lazy loaded!
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue') // Separate chunk!
  }
]

2. Dependency Optimization

javascript

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['vue', 'vue-router'], // Pre-bundle these
    exclude: ['large-library']      // Don't pre-bundle these
  }
})

3. Asset Optimization

javascript

// Automatically optimized by Vite:
import smallImage from '@/assets/small.jpg'      // Inlined as base64
import largeImage from '@/assets/large.jpg'      // Separate file with hash

What You've Mastered! 🏆

✅ Lightning-fast development with instant HMR
✅ Modern JavaScript features out of the box
✅ Environment variables and configuration
✅ Asset handling and optimization
✅ Production builds for deployment
✅ The difference between development and production modes
✅ Professional development workflow with modern tooling

Why Vite is a Game-Changer

🚀 Developer Experience

Instant server startup
Lightning-fast hot reload
Modern features without configuration
Excellent error messages

📦 Production Ready

Optimized bundles
Automatic code splitting
Asset optimization
Modern browser support with legacy fallbacks

🔧 Extensible

Rich plugin ecosystem
Framework agnostic
Easy configuration
Active community

What's Next?

You now understand the power of modern build tools! In the next project, you'll learn about component communication - how parent and child components talk to each other to build complex applications.

With Vite powering your development environment, you're equipped with professional-grade tools that make Vue development fast, enjoyable, and productive! ⚡

Quick Reference

Essential Commands

bash

npm create vite@latest        # Create new Vite project
npm run dev                   # Start development server  
npm run build                 # Build for production
npm run preview               # Preview production build

Key Files

index.html - App entry point (front and center!)
vite.config.js - Vite configuration
.env - Environment variables (prefix with VITE_)
src/main.js - JavaScript entry point

Modern Features

ES Modules - Native browser modules
Hot Module Replacement - Instant updates
Environment Variables - import.meta.env.VITE_*
Asset Processing - Automatic optimization
Code Splitting - Automatic lazy loading

You're now developing with cutting-edge tools! 🌟

08 - Lightning Fast Development with Vite! ⚡

Welcome to the Future of Web Development

What You'll Discover Today

What Vite is and why it's a game-changer
Lightning-fast development with instant hot reload
Modern JavaScript features out of the box
Optimized production builds for deployment
The difference between development and production modes

What is Vite? 🚀

Vite (French for "quick") is a build tool that provides:

⚡ Ultra-fast development server with instant Hot Module Replacement (HMR)
📦 Optimized production builds using Rollup bundling
🎯 Modern JavaScript support without configuration
🔧 Rich plugin ecosystem for any framework

Think of Vite as your development supercharger - it makes everything faster and more enjoyable!

The Vite Magic: Development vs Production

🔧 Development Mode (What You Experience)

Native ES modules - no bundling needed
Instant server start - ready in milliseconds
Lightning HMR - changes appear instantly
On-demand compilation - only builds what you need

📦 Production Mode (What Users Get)

Optimized bundles with Rollup
Code splitting for faster loading
Asset optimization (images, CSS, JS)
Modern browser support with legacy fallbacks

Creating Your First Vite Project

Method 1: The Vue Way (Recommended)

This uses create-vue which includes Vite automatically:

bash

# Create Vue project with Vite (this is what you did in project 07!)
npm create vue@latest my-vite-app

cd my-vite-app
npm install
npm run dev

Method 2: Pure Vite with Vue Template

This uses Vite directly with a Vue template:

bash

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

cd my-vite-vue-app
npm install
npm run dev

Method 3: Interactive Setup

Let Vite ask you what you want:

bash

# Interactive project creation
npm create vite@latest

# Follow the prompts:
# ✔ Project name: … my-awesome-app
# ✔ Select a framework: › Vue
# ✔ Select a variant: › JavaScript

All methods give you Vite power! 🎯

Vite Project Structure Deep Dive

my-vite-app/
├── public/
│   └── favicon.ico          # Static assets (copied as-is)
├── src/
│   ├── assets/             # Processed assets (images, styles)
│   ├── components/         # Vue components
│   ├── App.vue            # Root component  
│   ├── main.js            # App entry point
│   └── style.css          # Global styles
├── index.html             # Entry point (front and center!)
├── package.json           # Dependencies and scripts
├── vite.config.js         # Vite configuration
└── README.md

🎯 Key Difference: `index.html` is Front and Center

Traditional bundlers: Hide index.html in a public/ folder
Vite: index.html is your app's entry point at the root

html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Notice: <script type="module"> - Vite serves your JavaScript as modern ES modules!

Understanding Vite's Speed Secrets

🚀 Why Vite is So Fast

1. Native ES Modules in Development

javascript

// Instead of bundling everything together (slow)
// Vite serves each file separately (fast!)

// main.js
import { createApp } from 'vue'           // From node_modules
import App from './App.vue'              // Your component
import './style.css'                     // Your styles

// Browser loads each file as needed - no bundling step!

2. On-Demand Compilation

Traditional bundlers: Bundle everything, then serve
Vite: Serve immediately, compile on request
Result: Instant server start! ⚡

3. Smart Hot Module Replacement

javascript

// When you edit a Vue component:
// 1. Vite detects the change instantly
// 2. Only recompiles that specific component  
// 3. Browser updates without page refresh
// 4. Component state is preserved!

4. Dependency Pre-bundling

javascript

// Vite pre-bundles node_modules dependencies
// Uses esbuild (written in Go) - incredibly fast!
// Cache them until they change
// Result: Fast subsequent starts

Essential Vite Commands

bash

# Development server (ultra-fast start)
npm run dev
# or
npx vite

# Production build (optimized for deployment)
npm run build
# or  
npx vite build

# Preview production build locally
npm run preview
# or
npx vite preview

# Development server with custom port
npx vite --port 3000

# Development server that opens browser automatically
npx vite --open

# Show help with all options
npx vite --help

Vite Configuration: `vite.config.js`

Basic Vite configuration for Vue:

javascript

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

export default defineConfig({
  plugins: [vue()],
  
  // Development server options
  server: {
    port: 3000,        // Custom port
    open: true,        // Auto-open browser
    host: true         // Allow external connections
  },
  
  // Build options
  build: {
    outDir: 'dist',    // Output directory
    sourcemap: true    // Generate source maps
  },
  
  // Path aliases (shortcuts for imports)
  resolve: {
    alias: {
      '@': '/src'      // Use @/components/MyComponent.vue
    }
  }
})

Advanced Vite Features

1. Environment Variables

bash

# .env file
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=My Awesome App

javascript

// Use in your Vue components
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// Built-in variables
console.log(import.meta.env.MODE)  // 'development' or 'production'
console.log(import.meta.env.DEV)   // true in development
console.log(import.meta.env.PROD)  // true in production

Important: Environment variables must start with VITE_ to be exposed to your app!

2. Asset Handling

javascript

// Static assets (in public/)
// URL: /favicon.ico
const faviconUrl = '/favicon.ico'

// Processed assets (in src/assets/)
// Vite processes these and gives them hash names
import logoUrl from '@/assets/logo.png'

// Dynamic asset imports
const getImageUrl = (name) => {
  return new URL(`/src/assets/images/${name}`, import.meta.url).href
}

3. CSS Features

vue

<style>
/* PostCSS features work out of the box */
.my-class {
  display: flex;
  gap: 1rem;  /* Modern CSS, Vite handles browser support */
}

/* CSS Modules */
:global(.global-class) {
  color: red;
}
</style>

<!-- CSS Modules in script -->
<script setup>
import styles from './component.module.css'
// Use: styles.myClass
</script>

4. Modern JavaScript Features

javascript

// All of these work out of the box in Vite:

// ES Modules
import { ref } from 'vue'
export default { /* ... */ }

// Optional chaining
const userName = user?.profile?.name

// Nullish coalescing
const title = pageTitle ?? 'Default Title'

// Top-level await (in async contexts)
const data = await fetch('/api/data')

// Dynamic imports (code splitting)
const MyComponent = () => import('./MyComponent.vue')

Comparing Vite to Traditional Bundlers

Feature	Traditional Bundlers	Vite
Dev Server Start	30-60 seconds	~200ms
Hot Reload	1-3 seconds	~50ms
JavaScript Support	Needs configuration	Modern features out of the box
CSS Processing	Complex setup	Built-in PostCSS, modules, etc.
Asset Handling	Manual configuration	Automatic optimization
Bundle Size	Often larger	Optimized with tree-shaking

Building for Production

When you run npm run build, Vite:

Bundles your code with Rollup (different tool for production)
Optimizes assets (minification, compression)
Code splits automatically for better loading
Generates modern builds with legacy fallbacks
Creates a dist/ folder ready for deployment

bash

npm run build

# Output:
dist/
├── assets/
│   ├── index-abc123.css     # Minified styles
│   └── index-def456.js      # Optimized JavaScript
├── favicon.ico
└── index.html               # Entry point

Real-World Vite Example

Let's create a feature-rich Vue component that showcases Vite's capabilities:

`src/components/ViteShowcase.vue`

vue

<template>
  <div class="vite-showcase">
    <h2>🚀 Vite Feature Showcase</h2>
    
    <!-- Environment Variables -->
    <div class="feature-section">
      <h3>Environment Variables</h3>
      <p>Mode: {{ mode }}</p>
      <p>API URL: {{ apiUrl }}</p>
      <p>Is Development: {{ isDev }}</p>
    </div>
    
    <!-- Dynamic Asset Loading -->
    <div class="feature-section">
      <h3>Dynamic Assets</h3>
      <img :src="logoUrl" alt="Vue logo" class="logo">
      <button @click="loadRandomImage">Load Random Image</button>
      <img v-if="randomImage" :src="randomImage" alt="Random" class="random-img">
    </div>
    
    <!-- Hot Reload Demo -->
    <div class="feature-section">
      <h3>Hot Reload Magic</h3>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
      <p class="hot-reload-tip">
        💡 Try editing this component while the counter is running - 
        your state will be preserved!
      </p>
    </div>
    
    <!-- Modern JavaScript Features -->
    <div class="feature-section">
      <h3>Modern JavaScript</h3>
      <p>Optional chaining: {{ user?.profile?.name ?? 'No user' }}</p>
      <p>Nullish coalescing: {{ title ?? 'Default Title' }}</p>
      <button @click="loadAsyncData">Load Async Data</button>
      <p v-if="asyncData">{{ asyncData }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import logoUrl from '@/assets/vue.svg'

// Environment variables
const mode = import.meta.env.MODE
const apiUrl = import.meta.env.VITE_API_URL || 'No API URL set'
const isDev = import.meta.env.DEV

// Reactive state
const count = ref(0)
const randomImage = ref(null)
const asyncData = ref(null)

// User data for modern JS demo
const user = ref({
  profile: {
    name: 'Vue Developer'
  }
})

const title = ref(null) // Will use nullish coalescing

// Methods
const increment = () => {
  count.value++
}

const loadRandomImage = async () => {
  // Dynamic import example
  const imageNumber = Math.floor(Math.random() * 3) + 1
  try {
    const imageModule = await import(`@/assets/images/demo-${imageNumber}.jpg`)
    randomImage.value = imageModule.default
  } catch (error) {
    console.log('Image not found, using placeholder')
    randomImage.value = 'https://via.placeholder.com/150x150?text=Demo'
  }
}

const loadAsyncData = async () => {
  // Simulate API call
  asyncData.value = 'Loading...'
  
  // Simulate delay
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  asyncData.value = 'Data loaded with modern async/await!'
}

// Lifecycle
onMounted(() => {
  console.log('🚀 Vite showcase component mounted!')
})
</script>

<style scoped>
.vite-showcase {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Arial, sans-serif;
}

.feature-section {
  background: #f8f9fa;
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  border-left: 4px solid #42b883;
}

.feature-section h3 {
  margin-top: 0;
  color: #2c3e50;
}

.logo {
  width: 50px;
  height: 50px;
  margin: 0 1rem;
}

.random-img {
  max-width: 150px;
  margin: 1rem;
  border-radius: 8px;
}

button {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin: 0.5rem;
  transition: background-color 0.2s;
}

button:hover {
  background: #369870;
}

.hot-reload-tip {
  background: #e7f3ff;
  padding: 1rem;
  border-radius: 4px;
  border-left: 3px solid #0066cc;
  font-style: italic;
}
</style>

Add to `src/App.vue`

vue

<template>
  <div id="app">
    <ViteShowcase />
  </div>
</template>

<script setup>
import ViteShowcase from './components/ViteShowcase.vue'
</script>

Create `.env` file

bash

# .env
VITE_API_URL=http://localhost:3000/api
VITE_APP_TITLE=My Vite Vue App

Debugging with Vite

1. Vue DevTools

Vite works perfectly with Vue DevTools browser extension for debugging.

2. Source Maps

Source maps are enabled by default, so you can debug your original source code.

3. Console Debugging

javascript

// Development-only logging
if (import.meta.env.DEV) {
  console.log('Debug info:', someData)
}

4. Network Tab

In browser dev tools, you can see individual module loads - great for understanding what's happening!

Performance Tips

1. Lazy Loading Routes

javascript

// router/index.js
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue') // Lazy loaded!
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue') // Separate chunk!
  }
]

2. Dependency Optimization

javascript

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['vue', 'vue-router'], // Pre-bundle these
    exclude: ['large-library']      // Don't pre-bundle these
  }
})

3. Asset Optimization

javascript

// Automatically optimized by Vite:
import smallImage from '@/assets/small.jpg'      // Inlined as base64
import largeImage from '@/assets/large.jpg'      // Separate file with hash

What You've Mastered! 🏆

✅ Lightning-fast development with instant HMR
✅ Modern JavaScript features out of the box
✅ Environment variables and configuration
✅ Asset handling and optimization
✅ Production builds for deployment
✅ The difference between development and production modes
✅ Professional development workflow with modern tooling

Why Vite is a Game-Changer

🚀 Developer Experience

Instant server startup
Lightning-fast hot reload
Modern features without configuration
Excellent error messages

📦 Production Ready

Optimized bundles
Automatic code splitting
Asset optimization
Modern browser support with legacy fallbacks

🔧 Extensible

Rich plugin ecosystem
Framework agnostic
Easy configuration
Active community

What's Next?

With Vite powering your development environment, you're equipped with professional-grade tools that make Vue development fast, enjoyable, and productive! ⚡

Quick Reference

Essential Commands

bash

npm create vite@latest        # Create new Vite project
npm run dev                   # Start development server  
npm run build                 # Build for production
npm run preview               # Preview production build

Key Files

index.html - App entry point (front and center!)
vite.config.js - Vite configuration
.env - Environment variables (prefix with VITE_)
src/main.js - JavaScript entry point

Modern Features

ES Modules - Native browser modules
Hot Module Replacement - Instant updates
Environment Variables - import.meta.env.VITE_*
Asset Processing - Automatic optimization
Code Splitting - Automatic lazy loading

You're now developing with cutting-edge tools! 🌟

Lightning Fast Development with Vite! ⚡ ​

What You'll Discover Today ​

What is Vite? 🚀 ​

The Vite Magic: Development vs Production ​

🔧 Development Mode (What You Experience) ​

📦 Production Mode (What Users Get) ​

Creating Your First Vite Project ​

Method 1: The Vue Way (Recommended) ​

Method 2: Pure Vite with Vue Template ​

Method 3: Interactive Setup ​

Vite Project Structure Deep Dive ​

🎯 Key Difference: index.html is Front and Center ​

Understanding Vite's Speed Secrets ​

🚀 Why Vite is So Fast ​

1. Native ES Modules in Development ​

2. On-Demand Compilation ​

3. Smart Hot Module Replacement ​

4. Dependency Pre-bundling ​

Essential Vite Commands ​

Vite Configuration: vite.config.js ​

Advanced Vite Features ​

1. Environment Variables ​

2. Asset Handling ​

3. CSS Features ​

4. Modern JavaScript Features ​

Comparing Vite to Traditional Bundlers ​

Building for Production ​

Real-World Vite Example ​

src/components/ViteShowcase.vue ​

Add to src/App.vue ​

Create .env file ​

Debugging with Vite ​

1. Vue DevTools ​

2. Source Maps ​

3. Console Debugging ​

4. Network Tab ​

Performance Tips ​

1. Lazy Loading Routes ​

2. Dependency Optimization ​

3. Asset Optimization ​

What You've Mastered! 🏆 ​

Why Vite is a Game-Changer ​

🚀 Developer Experience ​

📦 Production Ready ​

🔧 Extensible ​

What's Next? ​

Quick Reference ​

Essential Commands ​

Key Files ​

Modern Features ​

08 - Lightning Fast Development with Vite! ⚡ ​

Welcome to the Future of Web Development ​

What You'll Discover Today ​

What is Vite? 🚀 ​

The Vite Magic: Development vs Production ​

🔧 Development Mode (What You Experience) ​

📦 Production Mode (What Users Get) ​

Creating Your First Vite Project ​

Method 1: The Vue Way (Recommended) ​

Method 2: Pure Vite with Vue Template ​

Method 3: Interactive Setup ​

Vite Project Structure Deep Dive ​

🎯 Key Difference: index.html is Front and Center ​

Understanding Vite's Speed Secrets ​

🚀 Why Vite is So Fast ​

1. Native ES Modules in Development ​

2. On-Demand Compilation ​

3. Smart Hot Module Replacement ​

4. Dependency Pre-bundling ​

Essential Vite Commands ​

Vite Configuration: vite.config.js ​

Advanced Vite Features ​

1. Environment Variables ​

2. Asset Handling ​

3. CSS Features ​

4. Modern JavaScript Features ​

Comparing Vite to Traditional Bundlers ​

Building for Production ​

Real-World Vite Example ​

src/components/ViteShowcase.vue ​

Lightning Fast Development with Vite! ⚡

What You'll Discover Today

What is Vite? 🚀

The Vite Magic: Development vs Production

🔧 Development Mode (What You Experience)

📦 Production Mode (What Users Get)

Creating Your First Vite Project

Method 1: The Vue Way (Recommended)

Method 2: Pure Vite with Vue Template

Method 3: Interactive Setup

Vite Project Structure Deep Dive

🎯 Key Difference: `index.html` is Front and Center

Understanding Vite's Speed Secrets

🚀 Why Vite is So Fast

1. Native ES Modules in Development

2. On-Demand Compilation

3. Smart Hot Module Replacement

4. Dependency Pre-bundling

Essential Vite Commands

Vite Configuration: `vite.config.js`

Advanced Vite Features

1. Environment Variables

2. Asset Handling

3. CSS Features

4. Modern JavaScript Features

Comparing Vite to Traditional Bundlers

Building for Production

Real-World Vite Example

`src/components/ViteShowcase.vue`

Add to `src/App.vue`

Create `.env` file

Debugging with Vite

1. Vue DevTools

2. Source Maps

3. Console Debugging

4. Network Tab

Performance Tips

1. Lazy Loading Routes

2. Dependency Optimization

3. Asset Optimization

What You've Mastered! 🏆

Why Vite is a Game-Changer

🚀 Developer Experience

📦 Production Ready

🔧 Extensible

What's Next?

Quick Reference

Essential Commands

Key Files

Modern Features

08 - Lightning Fast Development with Vite! ⚡

Welcome to the Future of Web Development

What You'll Discover Today

What is Vite? 🚀

The Vite Magic: Development vs Production

🔧 Development Mode (What You Experience)

📦 Production Mode (What Users Get)

Creating Your First Vite Project

Method 1: The Vue Way (Recommended)

Method 2: Pure Vite with Vue Template

Method 3: Interactive Setup

Vite Project Structure Deep Dive

🎯 Key Difference: `index.html` is Front and Center

Understanding Vite's Speed Secrets

🚀 Why Vite is So Fast

1. Native ES Modules in Development

2. On-Demand Compilation

3. Smart Hot Module Replacement

4. Dependency Pre-bundling

Essential Vite Commands

Vite Configuration: `vite.config.js`

Advanced Vite Features

1. Environment Variables

2. Asset Handling

3. CSS Features

4. Modern JavaScript Features

Comparing Vite to Traditional Bundlers

Building for Production

Real-World Vite Example

`src/components/ViteShowcase.vue`