vitejs.md

Vite Documentation

Introduction

Vite is a modern frontend build tool that provides fast development and optimized production builds. It leverages native ES modules and supports frameworks like Vue, React, and Svelte.

Key Features

• Lightning-fast cold starts
• Hot Module Replacement (HMR)
• Out-of-the-box support for TypeScript, JSX, CSS, and more
• Optimized production builds with Rollup

Basic Usage

1. Install Vite:

   npm create vite@latest

2. Start Development Server:

   npm run dev

3. Build for Production:

   npm run build

4. Preview Production Build:

   npm run preview

Configuration

• Vite uses vite.config.js for project configuration.
• Supports plugins for extending functionality.

Example: vite.config.js

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
});

Best Practices

• Use environment variables for configuration.
• Organize source files in src/.
• Leverage Vite plugins for framework support and optimizations.

Advanced Topics

Plugin Ecosystem

Vite has a rich plugin ecosystem. You can use official and community plugins or write your own:

import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
  plugins: [vue(), legacy()],
});

Environment Variables

• Prefix with VITE_ to expose to client code.
• Use .env, .env.development, .env.production for different environments.

VITE_API_URL=https://api.example.com

Access in code: import.meta.env.VITE_API_URL

Aliases

Simplify imports with path aliases:

import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

Troubleshooting

• Use --debug flag for verbose logs.
• Clear cache with rm -rf node_modules/.vite.
• Check Vite and plugin versions for compatibility.

Deployment

• Build output is in the dist/ folder.
• Deploy to static hosts like Netlify, Vercel, or GitHub Pages.

Useful Resources

• Vite Documentation
• Awesome Vite Plugins