← All Posts

How to Do Vite Configuration on Claude Code

Claude Code can handle Vite configuration end-to-end: scaffold a vite.config.ts, add plugins, configure dev-server proxies, set up path aliases, and wire in environment variables. Just describe what you need in plain English and Claude Code generates or edits the file directly. If you're hitting Claude Code usage limits mid-setup, Usagebar keeps your remaining quota visible in the macOS menu bar so a 5-hour lockout never blindsides you mid-PR.

  • Works with React, Vue, Svelte, and vanilla TypeScript projects
  • Claude Code reads existing config files before editing, reducing conflicts
  • Most Vite tasks (plugins, aliases, proxy) complete in 1-3 prompts

What is Vite and why configure it inside Claude Code?

Vite is a next-generation frontend build tool that serves files over native ES modules during development and bundles with Rollup for production. Its configuration lives in a single vite.config.ts (or .js) file at the project root, covering plugins, server options, build output, and module resolution.

Editing that file manually means cross-referencing the Vite configuration reference, remembering plugin API signatures, and juggling TypeScript types. Claude Code eliminates that context-switch: you stay in the terminal, describe the change, and the model writes idiomatic config code that fits your existing setup.

How to set up a Vite project with Claude Code

If you're starting from scratch, open your project directory in Claude Code and run a prompt like:

Scaffold a Vite + React + TypeScript project in this directory using the official template. Install dependencies and confirm the dev server starts.

Claude Code will call npm create vite@latest with the correct template flag, install packages, and verify the server starts on localhost:5173 (the default Vite dev port). For an existing project, just open the repo root and skip straight to configuration prompts below.

Common Vite configuration tasks you can delegate to Claude Code

Adding plugins (React, SVG, PWA, and more)

Plugins are the most common reason to edit vite.config.ts. Prompt Claude Code with the plugin name and what you need it to do:

Add @vitejs/plugin-react to vite.config.ts with the emotion JSX runtime enabled.

Install vite-plugin-svgr and configure it so I can import SVGs as React components.

Claude Code installs the package, adds the import, and inserts it into the plugins array, preserving any plugins already there. This mirrors the pattern described in the Vite plugin guide.

Configuring a dev-server proxy

Proxying API calls to a backend during development is a classic Vite configuration task. Describe your backend:

Add a dev server proxy so that requests to /api are forwarded to http://localhost:3001. Rewrite the /api prefix.

Claude Code writes the server.proxy block with the correct rewrite function. You can iterate: "also add a WebSocket proxy for /ws" and it patches the same block.

Setting up path aliases

Path aliases (e.g., @/components instead of ../../components) require changes in both vite.config.ts and tsconfig.json. Claude Code handles both files in a single prompt:

Add a path alias @ pointing to the src directory. Update both vite.config.ts and tsconfig.json so TypeScript and Vite agree.

This is one of the places where Claude Code's multi-file awareness pays off: it reads both files and makes coordinated edits, which is easy to get wrong manually. This is similar to how it handles Tailwind configuration that spans multiple config files.

Environment variables

Vite uses VITE_-prefixed variables exposed to the client bundle. Claude Code can scaffold your .env files and update config to consume them:

Create .env, .env.development, and .env.production files with a VITE_API_URL variable. Show me how to read it in a TypeScript file with proper typing.

For secrets that must stay server-side, Claude Code will warn you about the VITE_ prefix convention and suggest keeping those variables out of the client bundle. See also setting up environment variables with Claude Code for a deeper walkthrough.

Build output configuration

Customizing the output directory, chunk naming, or enabling source maps for production:

Set the build output directory to dist/public, enable source maps, and split vendor dependencies into a separate chunk.

TypeScript and Prettier integration

Vite projects almost always need a TypeScript config that aligns with the build tool. Claude Code can wire these together. Check out the guides on TypeScript migration with Claude Code and Prettier configuration on Claude Code for how to chain these tasks together.

Tips for getting the best results from Claude Code on Vite config

  • Give Claude Code file context first. Start with "read my current vite.config.ts" before asking for changes. Claude Code does this automatically when you reference the file, but being explicit avoids overwriting existing settings.
  • Describe intent, not code. "I want HMR to work across a Docker bridge network" gets better results than pasting half-formed config snippets.
  • Ask for validation. End prompts with "then run the dev server and confirm it starts" to catch plugin version mismatches before you context-switch back to the browser.
  • Use /usage to track your session. Complex Vite setups with multiple plugins and proxy rules can consume meaningful Claude Code turns. Run /usage inside Claude Code or check claude.ai/settings/usage to see where you stand.

Avoid mid-task lockouts with Usagebar

The worst time to hit a Claude Code usage limit is halfway through a Vite migration: you've got a half-configured vite.config.ts, mismatched TypeScript paths, and no working dev server. Claude Code usage resets on a 5-hour rolling window (how usage limits reset), but you can't see the countdown without checking manually.

Usagebar puts your Claude Code usage percentage directly in the macOS menu bar, with smart notifications at 50%, 75%, and 90% capacity. You see the limit coming before it hits. Credentials are stored in macOS Keychain (never in plaintext), and pricing is pay-what-you-want with a free option for students.

If you're setting up CI/CD alongside your Vite build, the CI/CD pipeline guide for Claude Code covers how to automate the build and test steps that follow a Vite configuration.

Get Usagebar and stop guessing how much Claude Code runway you have left.

Key takeaways

  1. Open your project root in Claude Code and describe the Vite change in plain English.
  2. Claude Code reads existing config files before editing, keeping changes additive.
  3. Multi-file tasks (aliases + tsconfig, plugins + types) work best as a single descriptive prompt.
  4. Ask Claude Code to validate by running the dev server after each significant change.
  5. Monitor your usage with /usage or Usagebar to avoid a 5-hour lockout mid-task.

Sources

Track Your Claude Code Usage

Never hit your usage limits unexpectedly. Usagebar lives in your menu bar and shows your 5-hour and weekly limits at a glance.

Get Usagebar