skills.rest
tungnguyen10
tungnguyen10COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vite

Configure, extend, and migrate Vite frontend build tool projects.

Updated Jan 18, 2026
Search Tags:#vite#ssr#web bundling#frontend build#rolldown migration#vite plugins#vite configuration
One-click install
npx skills add https://github.com/tungnguyen10/iuh_department --skill vite-tungnguyen10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite
Source: https://github.com/tungnguyen10/iuh_department/tree/main/.agents/skills/vite
Command: npx skills add https://github.com/tungnguyen10/iuh_department --skill vite-tungnguyen10

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Configuring Vite projects, writing custom plugins, setting up SSR builds, and migrating to Vite 8's new Rolldown and Oxc stack requires deep knowledge of Vite's APIs and migration patterns, which can lead to misconfigurations and broken builds without proper reference guidance.

Core Features & Use Cases

  • Vite Configuration Support: Covers basic setup, conditional and async configs, environment variables, resolve aliases, proxy settings, and build targets for all Vite project types.
  • Plugin Development Guidance: Provides patterns for writing Vite-specific plugins, implementing virtual modules, handling HMR updates, and controlling plugin execution order.
  • Vite 8 Migration Assistance: Maps legacy Vite 7 Rollup and esbuild options to their Vite 8 Rolldown and Oxc equivalents, with step-by-step migration paths for large projects.
  • Use Case: If you are building a component library with Vite and need to configure library mode output with correct external dependencies, or migrating an existing Vite 7 SSR app to Vite 8 to leverage 10-30x faster build speeds, this skill provides the exact reference patterns and best practices.

Quick Start

Use the vite skill to configure a custom Vite plugin that injects a third-party analytics script into all HTML entry points for your production build.

Frequently Asked Questions about vite

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

FAQPage Schema
How do I migrate my Vite 7 project to Vite 8 Rolldown?▼

To migrate from Vite 7 to Vite 8, map legacy Rollup and esbuild options to their Rolldown and Oxc equivalents using step-by-step migration paths. This ensures large projects successfully transition to faster build speeds without breaking configurations.

How do I write a custom Vite plugin to inject scripts into HTML?▼

Writing a custom Vite plugin involves implementing Vite-specific plugin hooks to inject third-party analytics scripts into all HTML entry points for your production build. This requires using virtual modules and controlling plugin execution order.

What is the best way to configure Vite library mode for a component library?▼

Configuring Vite library mode requires setting up correct external dependencies and build targets within your Vite configuration. This pattern ensures proper output generation for component library packaging and distribution.

How does Vite SSR setup work with environment variables and proxies?▼

Vite SSR setup uses conditional and async configs to manage environment variables, resolve aliases, and proxy settings. This configuration approach ensures server-side rendering builds correctly integrate with your development and production environments.

Can I use TypeScript for my Vite configuration file?▼

Yes, you can use TypeScript for Vite configuration. This skill provides exact reference patterns for TypeScript Vite configs, allowing you to strongly type your build settings, Oxc transformer options, and Rolldown build configurations.

What are the limitations when handling HMR updates in custom Vite plugins?▼

Handling HMR updates in custom Vite plugins requires careful management of plugin execution order and virtual modules. Known limitations involve ensuring HMR updates do not break state or fail to trigger correctly during development.

Related Skills

Explore More Software Engineering Skills→
vessuxvessux
1

using-git-worktrees

Create an isolated Git worktree workspace for feature development.

Community
Advanced
json-choijson-choi

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS workflows.

Community
Intermediate
mgd34msumgd34msu
4

storybook

Develop, document, and test UI components in isolation with Storybook.

Community
Intermediate
Michae2xlMichae2xl

nextjs-turbopack

Guide Turbopack usage in Next.js 16+ for incremental bundling and hot module replacement.

Community
Intermediate