skills.rest
jesusprodriguezUnir
jesusprodriguezUnirCOMMUNITY
Explore all skills by this author →
GitHub

vite

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

Updated May 14, 2026
Search Tags:#frontend#configuration#vite#ssr#build tool#rolldown#plugin api
One-click install
npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill vite-jesusprodriguezunir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite
Source: https://github.com/jesusprodriguezUnir/bracketMundial/tree/main/.agents/skills/vite
Command: npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill vite-jesusprodriguezunir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend developers working with Vite often struggle with configuration details, plugin authoring, SSR setup, and the breaking changes introduced by Vite 8's Rolldown bundler. This Skill provides authoritative guidance on vite.config.ts patterns, the plugin API, and migration paths so you avoid trial-and-error debugging. ## Core Features & Use Cases - Configuration Guidance: Covers defineConfig, conditional configs, loadEnv, resolve aliases, server proxy, and build targets for vite.config.ts. - Plugin Authoring: Explains Vite-specific hooks (configResolved, configureServer, transformIndexHtml, handleHotUpdate), virtual modules, and plugin ordering with enforce. - Build, SSR & Migration: Documents library mode, multi-page apps, the JavaScript API, the Vite 6+ Environment API, and the Vite 8 Rolldown/Oxc migration (rollupOptions to rolldownOptions, esbuild to oxc). - Use Case: You are upgrading a project to Vite 8 and your build fails on rollupOptions. Use this Skill to rewrite the config with rolldownOptions and convert esbuild JSX settings to the oxc option. ## 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'. Export defineConfig with resolve: { alias: { '@': '/src' } } and imports using '@' will resolve to your source directory.

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 for JSX and transform settings. Most Vite plugins keep working since Rolldown supports the Rollup plugin API.

How do I create a Vite plugin with virtual modules?▼

Implement resolveId to map a 'virtual:my-module' id to a '\0'-prefixed resolved id, then return module code from the load hook. Consumers can then import from 'virtual:my-module' as if it were a real file.

Does Vite support SSR for application development?▼

Vite's SSR support is low-level and intended for meta-framework authors rather than app developers. For application SSR, use frameworks built on Vite such as Nuxt, SvelteKit, SolidStart, or TanStack Start.

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

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

What is the Vite Environment API and when should I use it?▼

The Environment API in Vite 6+ lets you define multiple runtime environments beyond client and SSR, such as edge runtimes. End users rarely need it; it mainly serves plugin and framework authors building custom runtimes.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

vite

Build frontend applications with Vite for React, Vue, and Svelte.

Official
Intermediate
TitoPrauseeTitoPrausee

vite-react-library-setup

Convert an unbuilt React project into a publishable Vite 5 library.

Community
Intermediate
do-ob-iodo-ob-io

pwa-web-game-setup

Scaffold PWA 3D game projects with React Three Fiber and Three.js.

Official
Intermediate
lespacemanlespaceman
4

router-plugin

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

Community
Intermediate