Vite Cheat Sheet

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
 
export default defineConfig

import { defineConfig } from 'vite';
 
export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    // Dev server config
    return {
      server: {

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

// vite.config.ts
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    host: '0.0.0.0', // expose ke network
    https: true,     // HTTPS di dev
    strictPort: true

// React component dengan HMR (via @vitejs/plugin-react sudah otomatis)
import { useEffect } from 'react';
 
// Vanilla JS HMR
export function setupCounter(element: HTMLButtonElement) {
  let counter =

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      // String shorthand
      '/api': 'http://localhost:8080',
 
      // Dengan options
      '/api': {
        target: 'http://localhost:8080'

# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
 
# .env.development
VITE_API_URL=http://localhost:8080
 
# .env.production
VITE_API_URL=https://api.example.com
 
# .env.staging
VITE_API_URL=https://staging-api.example.com

// Akses di code
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_TITLE);
 
// TypeScript type safety
// src/vite-env.d.ts
/// <reference types

// vite.config.ts
export default defineConfig({
  build: {
    target: 'es2020',        // Target browser JS
    outDir: 

// Lazy load route
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
 
// Prefetch saat idle
const button = document.querySelector('#load-chart');
button?.addEventListener(

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'date-fns'],
    exclude: ['my-local-package'],
    esbuildOptions: {
      target: 'es2020',
      define: {
        global: 'globalThis',
      },

// vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
 
export default defineConfig({

// package.json untuk library
{
  "name": "my-lib",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/my-lib.cjs.js",
  "module": "./dist/my-lib.es.js",
  "types": 

// vite.config.ts
export default defineConfig({
  server: {
    ssr: {
      external: ['express'], // Pakai saat SSR
    },
  },
  ssr: {

import type { Plugin, PluginOption } from 'vite';
 
function myPlugin(options: { 

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      // Generate class names
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      localsConvention: 'camelCase',
    },
    preprocessorOptions: {
      scss: {
        additionalData: 

// CSS Modules
import styles from './button.module.css';
 
export function Button() {
  return `<button class="${styles.btn}">Click</button>`;
}

// Import asset sebagai URL
import imgUrl from './assets/logo.png';
// imgUrl => '/assets/logo.2h3k4j.png'
 
// Import asset sebagai string
import svgString from './icon.svg?raw';
 
// Import sebagai Web Worker
import MyWorker from './worker?worker';
const

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],