Files
agent-skills/skills/vite/references/core-config.md
Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 16:27:42 -06:00

2.8 KiB

name, description
name description
vite-config Vite configuration patterns using vite.config.ts

Vite Configuration

Basic Setup

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  // config options
})

Vite auto-resolves vite.config.ts from project root. Supports ES modules syntax regardless of package.json type.

Conditional Config

Export a function to access command and mode:

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return { /* dev config */ }
  } else {
    return { /* build config */ }
  }
})
  • command: 'serve' during dev, 'build' for production
  • mode: 'development' or 'production' (or custom via --mode)

Async Config

export default defineConfig(async ({ command, mode }) => {
  const data = await fetchSomething()
  return { /* config */ }
})

Using Environment Variables in Config

.env files are loaded after config resolution. Use loadEnv to access them in config:

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // Load env files from cwd, include all vars (empty prefix)
  const env = loadEnv(mode, process.cwd(), '')
  
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
    server: {
      port: env.APP_PORT ? Number(env.APP_PORT) : 5173,
    },
  }
})

Key Config Options

resolve.alias

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
      '~': '/src',
    },
  },
})

define (Global Constants)

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
})

Values must be JSON-serializable or single identifiers. Non-strings auto-wrapped with JSON.stringify.

plugins

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

Plugins array is flattened; falsy values ignored.

server.proxy

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

build.target

Default: Baseline Widely Available browsers. Customize:

export default defineConfig({
  build: {
    target: 'esnext', // or 'es2020', ['chrome90', 'firefox88']
  },
})

TypeScript Intellisense

For plain JS config files:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

Or use satisfies:

import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig