skills.rest
trcat
trcatCOMMUNITY
Explore all skills by this author →
GitHub

vue-jsx-best-practices

Enforce HTML attribute names and Vue JSX plugin configuration in Vue 3 projects.

Updated Jan 29, 2026
Search Tags:#typescript#vue#best-practices#jsx#vue3#tsx
One-click install
npx skills add https://github.com/trcat/ai-todo-list --skill vue-jsx-best-practices-trcat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/trcat/ai-todo-list/tree/main/.agents/skills/vue-jsx-best-practices
Command: npx skills add https://github.com/trcat/ai-todo-list --skill vue-jsx-best-practices-trcat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vue JSX code often uses React conventions like className or htmlFor, causing type errors in Vue TSX and confusion. This skill guides developers to adopt Vue-style JSX attributes and correct plugin configuration to achieve consistent, type-safe JSX in Vue 3.

Core Features & Use Cases

  • Enforce HTML attribute names (class, for) in Vue JSX.
  • Provide guidance on configuring Vue JSX plugins and TypeScript for TSX in Vue 3.
  • Use case: Migrating a Vue component that uses JSX from a React codebase while preserving type safety.

Quick Start

Configure your Vue 3 project for JSX by setting up tsconfig.json with jsx: preserve and jsxImportSource: vue, installing the appropriate Vue JSX plugin, and ensuring you consistently use standard HTML attributes (class, for) in JSX.

Frequently Asked Questions about vue-jsx-best-practices

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

FAQPage Schema
Why does my Vue JSX code throw type errors when using className and htmlFor?▼

Vue JSX throws type errors with React-style attributes like className and htmlFor because Vue TSX requires standard HTML attribute names. You must use class and for in Vue 3 JSX to maintain type safety and avoid React convention pitfalls.

How do I configure TypeScript for Vue 3 TSX render functions?▼

To configure TypeScript for Vue 3 TSX, set jsx to preserve and jsxImportSource to vue in your tsconfig.json. This setup ensures proper type checking and integrates Vue JSX tooling for consistent render functions.

What is the best way to migrate a React JSX component to Vue 3 while keeping type safety?▼

The best way to migrate React JSX to Vue 3 with type safety is enforcing Vue-style HTML attributes like class instead of className. Configure your Vue JSX plugin and tsconfig.json properly to ensure consistent TSX code style.

Does Vue 3 support JSX in single file components or only render functions?▼

Vue 3 supports JSX in both render functions and single file components. Proper plugin configuration and TypeScript settings are required to ensure type-safe TSX usage across your Vue project components.

Do I need a specific Vue JSX plugin to write TSX in Vue 3?▼

Yes, you need to install the appropriate Vue JSX plugin and configure TypeScript with jsx: preserve and jsxImportSource: vue. This ensures your Vue 3 TSX code is type-safe and follows consistent style guidelines.

Related Skills

Explore More Software Engineering Skills→
bingeli1379bingeli1379
2

vue-jsx-best-practices

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

Community
Intermediate
zuiaizengdadazuiaizengdada
9

vue-jsx-best-practices

Standardize Vue JSX attribute names for Vue 3 projects.

Community
Intermediate
NKDShinKuNKDShinKu

vue-jsx-best-practices

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

Community
Basic
PatternsDevPatternsDev
235

render-functions

Build Vue components programmatically using render functions and JSX.

Official
Intermediate