skills.rest
viniciuscs84
viniciuscs84COMMUNITY
Explore all skills by this author →
Website𝕏@viniciuscs84GitHub

vite

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend developers working with Vite often struggle with correct configuration, plugin authoring, SSR setup, and migrating to Vite 8's Rolldown bundler, leading to broken builds, missing env variables, and HMR issues. ## Core Features & Use Cases - Configuration Guidance: Set up vite.config.ts with defineConfig, aliases, proxies, env variables, and conditional config based on command and mode. - Plugin Authoring & Features: Write Vite plugins using hooks like configResolved, transformIndexHtml, and handleHotUpdate, plus use glob imports, asset queries, and CSS Modules. - SSR & Migration: Implement SSR with middleware mode and ssr-manifest, and migrate from Vite 7 to Vite 8 by converting rollupOptions to rolldownOptions and esbuild to oxc. - Use Case: When upgrading a React app to Vite 8, use this Skill to rewrite the config for Rolldown, fix JSX transform settings, and verify plugin compatibility. ## Quick Start Use the vite skill to help me configure my vite.config.ts with a React plugin, path alias for @, and a dev server proxy to my backend API.

Frequently Asked Questions about vite

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

FAQPage Schema
How do I configure a proxy in vite.config.ts?▼

Add a server.proxy entry mapping a path prefix to a target URL, with options like changeOrigin and rewrite. For example, proxy '/api' to 'http://localhost:8080' so dev requests forward to your backend.

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

Rename rollupOptions to rolldownOptions and replace the esbuild option with oxc for JSX and transform settings. Most plugins work unchanged since Rolldown supports Rollup's plugin API; test large projects via rolldown-vite first.

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 SECRET_KEY, are intentionally excluded and return undefined in the browser.

Does Vite support SSR and how do I set it up?▼

Yes, Vite supports SSR via middleware mode in dev using ssrLoadModule, and separate client/server builds using the --ssr flag. Generate an ssr-manifest for preload hints and control bundling with ssr.noExternal and ssr.external.

Why is HMR not triggering for my Vite module?▼

A module must call import.meta.hot.accept() or have an ancestor that does, otherwise Vite performs a full page reload. Check that your module or its framework plugin handles hot update boundaries.

Related Skills

Explore More Software Engineering Skills→
openwebfopenwebf
2.5k

webf-quickstart

Scaffold a Vite-based frontend and load it into WebF Go for testing.

Official
Intermediate
llm011llm011
9

vercel-deploy

Deploy static websites and web applications to Vercel non-interactively.

Official
Intermediate
Async-IOAsync-IO

validate-frontend

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

Official
Intermediate
zh667zh667

nextjs-turbopack

Compare Turbopack and Webpack bundler strategies for Next.js 16+ projects.

Community
Intermediate