skills.rest
bingeli1379
bingeli1379COMMUNITY
Explore all skills by this author →
GitHub

vue-jsx-best-practices

Configure TypeScript and Vite for Vue JSX with Vue-specific attributes.

2|Updated Apr 6, 2026
Search Tags:#typescript#vue#web-development#jsx#tsx#vue-jsx#attribute-naming
One-click install
npx skills add https://github.com/bingeli1379/eli-claude-marketplace --skill vue-jsx-best-practices-bingeli1379
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/bingeli1379/eli-claude-marketplace/tree/main/plugins/eureka-sdd/skills/vue-jsx-best-practices
Command: npx skills add https://github.com/bingeli1379/eli-claude-marketplace --skill vue-jsx-best-practices-bingeli1379

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue JSX differs from React JSX in attribute naming and configuration, which can cause type errors and confusion during migration. This guide clarifies Vue-specific JSX usage and best practices.

Core Features & Use Cases

  • Use standard HTML attributes in Vue JSX (class instead of className, for instead of htmlFor) to align with Vue templates and TypeScript safety.
  • Configure tooling for Vue JSX (TSX/TSX options, Vite plugin) to enable proper type inference and smooth development.
  • Understand event handling and attribute differences in Vue JSX to ensure predictable behavior when migrating components.

Quick Start

Start by configuring TypeScript and Vite for Vue JSX, then convert a React JSX component by replacing className with class and htmlFor with for.

Frequently Asked Questions about vue-jsx-best-practices

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

FAQPage Schema
How do I write Vue JSX without React-style attribute naming errors?▼

You must use standard HTML attributes in Vue JSX, such as class instead of className and for instead of htmlFor. Aligning with Vue templates prevents type inference errors and ensures predictable component behavior during migration.

How do I configure TypeScript and Vite for Vue JSX TSX files?▼

To configure Vue JSX, set jsx and jsxImportSource to vue in TypeScript. Vite projects additionally require the vue-jsx plugin to enable proper type inference and smooth development tooling setup.

Why does my migrated React component fail type checking in Vue 3?▼

Migrated React components fail type checking because Vue JSX differs in attribute naming and event handling. Replacing React attributes like htmlFor with standard HTML attributes resolves type inference discrepancies and ensures predictable behavior.

What is the best way to migrate React components to Vue JSX?▼

Start by configuring TypeScript and Vite for Vue JSX, then convert the React component by replacing className with class and htmlFor with for. This approach ensures proper tooling setup and predictable event handling in Vue 3.

Does Vue JSX work with TypeScript for type inference?▼

Vue JSX works with TypeScript for type inference when you configure jsx and jsxImportSource to vue. Vite projects additionally require the vue-jsx plugin to enable proper type inference and smooth development tooling setup.

Related Skills

Explore More Software Engineering Skills→
zuiaizengdadazuiaizengdada
9

vue-jsx-best-practices

Standardize Vue JSX attribute names for Vue 3 projects.

Community
Intermediate
aiaihomeaiaihome

vue-jsx-best-practices

Identify Vue JSX best practices for avoiding React-specific attributes and configuring plugins.

Community
Intermediate
jaypatrickjaypatrick

vue-jsx-best-practices

Document Vue 3 JSX best practices and TypeScript tooling configuration.

Community
Intermediate
NKDShinKuNKDShinKu

vue-jsx-best-practices

Align Vue JSX attribute usage and tooling configuration with Vue conventions.

Community
Basic