skills.rest
DCueto
DCuetoCOMMUNITY
Explore all skills by this author →
𝕏@dcuetomeGitHub

vite

Configure Vite build tooling, plugins, SSR, and Rolldown migration for frontend projects.

Updated Apr 1, 2026
Search Tags:#frontend#configuration#vite#ssr#build tool#rolldown#plugin api
One-click install
npx skills add https://github.com/DCueto/zen-track --skill vite-dcueto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite
Source: https://github.com/DCueto/zen-track/tree/main/ZenTrackApp/.agents/skills/vite
Command: npx skills add https://github.com/DCueto/zen-track --skill vite-dcueto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Working with Vite involves many moving parts: vite.config.ts options, plugin authoring, environment variables, SSR setup, and the breaking changes introduced by Vite 8's Rolldown bundler. This Skill consolidates authoritative guidance so you configure and extend Vite correctly without digging through scattered documentation. ## Core Features & Use Cases - Configuration Guidance: Covers vite.config.ts patterns including defineConfig, conditional and async configs, loadEnv, resolve.alias, server.proxy, and build targets. - Plugin API & Features: Explains Vite-specific hooks (config, configResolved, configureServer, transformIndexHtml, handleHotUpdate), virtual modules, import.meta.glob, asset queries, and the HMR API. - Build, SSR & Migration: Details library mode, multi-page apps, the JavaScript API, the Vite 6+ Environment API, and the Vite 8 migration from rollupOptions/esbuild to rolldownOptions/oxc. - Use Case: When upgrading a project to Vite 8, ask for help converting an existing rollupOptions and esbuild config into the new rolldownOptions and oxc equivalents, including JSX runtime settings. ## Quick Start Use the vite skill to migrate my vite.config.ts from Vite 7 rollupOptions to the Vite 8 Rolldown configuration.

Frequently Asked Questions about vite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure path aliases in vite.config.ts?▼

Use the resolve.alias option in vite.config.ts to map shortcuts like '@' to '/src'. Define the config with defineConfig from 'vite' and place alias entries under the resolve key.

How to migrate from Vite 7 rollupOptions to Vite 8 Rolldown?▼

Rename build.rollupOptions to build.rolldownOptions and replace the esbuild option with the oxc option. JSX settings move to oxc.jsx with runtime, pragma, and importSource fields. Most Vite plugins keep working since Rolldown supports the Rollup plugin API.

Does Vite support SSR for application development?▼

Vite's SSR support is low-level and aimed at meta-framework authors rather than application developers. For app SSR, use Vite-based frameworks like Nuxt, SvelteKit, SolidStart, or TanStack Start, and consider Nitro for the server layer.

Why are my environment variables undefined in Vite client code?▼

Only variables prefixed with VITE_ are exposed to client code via import.meta.env. Variables without the prefix, like DB_PASSWORD, stay server-side. Use loadEnv in vite.config.ts to read env files during config resolution.

How do I create a virtual module in a Vite plugin?▼

Implement resolveId and load hooks in your plugin. Prefix the user-facing id with 'virtual:' and the resolved id with '\0', then return the module source string from the load hook.

What changed in Vite 8 compared to Vite 7?▼

Vite 8 replaces esbuild and Rollup with Rolldown, a Rust-based bundler, and uses the Oxc transformer for dev transforms. Config keys change from rollupOptions to rolldownOptions and esbuild to oxc, with reported 10-30x faster production builds.

Related Skills

Explore More Software Engineering Skills→
wixelswixels

convex-quickstart

Automate Convex backend setup and integration for frontend applications.

Official
Intermediate
BRANDNEWSHVTBRANDNEWSHVT

nuxt

Create Nuxt-based Vue SSR infrastructure with file-based routing and Nitro deployment.

Official
Advanced
Async-IOAsync-IO

validate-frontend

Execute TypeScript type checks, ESLint linting, and Vitest unit tests on frontend code.

Official
Intermediate
lespacemanlespaceman
4

router-plugin

Automate file-based routing and code splitting for TanStack Router across Vite, Webpack, Rspack, and esbuild.

Community
Intermediate