vite

Configure Vite projects, plugin APIs, and SSR setups in vite.config.ts.

Updated Apr 6, 2022

Search Tags:#migration #vite #ssr #build-config #rolldown #plugin-api

Ready to run

npx skills add https://github.com/wjyugutou/study-test-demo --skill vite-wjyugutou

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vite
Source: https://github.com/wjyugutou/study-test-demo/tree/main/.trae/skills/vite
Command: npx skills add https://github.com/wjyugutou/study-test-demo --skill vite-wjyugutou

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers configure Vite projects, build configurations, plugin APIs, and SSR setups across modern web apps, including migration to Vite 8 Rolldown.

Core Features & Use Cases

Configuration: manage vite.config.ts using defineConfig and plugin options.
Build & SSR: configure library builds, SSR middleware, and production output.
Plugin API: customize the Vite plugin lifecycle and dev server behavior.
Migration & Framework Interop: migrate from older Vite versions and align with Rolldown.

Quick Start

Install Vite and create a vite.config.ts using defineConfig, then run npm run dev or npm run build.

Frequently Asked Questions about vite

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

FAQPage Schema

How do I configure Vite SSR middleware for production output?▼

To configure Vite SSR, you define server settings and SSR options within vite.config.ts using defineConfig. This manages server-side rendering middleware and production output for modern web apps.

What is the best way to migrate an existing project to Vite 8 Rolldown?▼

Migrating to Vite 8 Rolldown involves aligning your project with Rolldown integration and applying rolling upgrade guidelines. You must update your vite.config.ts and adjust existing build configurations to ensure framework interop.

How do I customize the Vite plugin API lifecycle and dev server behavior?▼

You customize the Vite plugin API by leveraging plugin hooks within vite.config.ts. This allows you to manipulate the plugin lifecycle and modify dev server behavior during development.

How to set up a library build using vite.config.ts and defineConfig?▼

To set up a Vite library build, configure build options within vite.config.ts using defineConfig. This streamlines project scaffolding and outputs production-ready library bundles.

Does Vite plugin API support custom hooks for framework migrations?▼

Yes, the Vite plugin API supports custom hooks for framework migrations. You can use these hooks alongside defineConfig in vite.config.ts to align with Rolldown and manage rolling upgrades.