skills.rest
bramanda48
bramanda48COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vite

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend developers working with Vite often struggle to recall the correct configuration patterns, plugin APIs, and migration steps across Vite versions, especially with the Vite 8 shift to Rolldown and Oxc. This Skill provides structured, version-aware guidance for configuring and extending Vite projects. ## Core Features & Use Cases - Configuration Guidance: Covers vite.config.ts, defineConfig, conditional and async configs, loadEnv, aliases, proxies, and build targets. - Plugin Authoring: Documents Vite-specific hooks like configResolved, configureServer, transformIndexHtml, virtual modules, and plugin ordering. - Build, SSR & Migration: Explains library mode, multi-page apps, the JavaScript API, the Vite 6+ Environment API, and the Vite 8 Rolldown/Oxc migration path. - Use Case: When upgrading a project from Vite 7 to Vite 8, use this Skill to convert rollupOptions to rolldownOptions and esbuild settings to oxc equivalents. ## Quick Start Ask the AI to help you write or migrate a vite.config.ts for your project, such as setting up path aliases, a dev proxy, and library mode build output.

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 add entries under resolve.alias for each alias you need.

How do I migrate from Vite 7 to Vite 8 Rolldown?▼

Rename rollupOptions to rolldownOptions and replace the esbuild option with the oxc option in your config. For large projects, test first with the rolldown-vite package before upgrading the vite dependency to version 8.

How do I access environment variables in Vite config?▼

Use the loadEnv function from 'vite' inside a function-form config, passing the mode and process.cwd(). Only variables prefixed with VITE_ are exposed to client code via import.meta.env.

Does Vite support SSR for application development?▼

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

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

Implement resolveId and load hooks in your plugin, using a 'virtual:' prefixed id resolved to a '\0' prefixed internal id. The load hook returns the module's source code as a string without any file on disk.

Related Skills

Explore More Software Engineering Skills→
initializinitializ
186

codegen-react

Scaffold Vite + React projects and run a hot-reloading development server.

Official
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
redpanda-dataredpanda-data
34

setup-quality-gate

Set up a quality gate with biome, tsgo, and vitest.

Official
Advanced
redacharfredacharf

router-plugin

Generate route trees and automatic code splitting for TanStack Router projects.

Community
Advanced