skills.rest
rockcookies
rockcookiesCOMMUNITY
Explore all skills by this author →
GitHub

vue-jsx-best-practices

Guides correct JSX attribute usage and configuration in Vue 3 projects.

1|Updated Feb 2, 2026
Search Tags:#typescript#vue#vite#jsx#tsx#react migration#render function
One-click install
npx skills add https://github.com/rockcookies/skills --skill vue-jsx-best-practices-rockcookies
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/rockcookies/skills/tree/main/skills/vuejs-ai/vue-jsx-best-practices
Command: npx skills add https://github.com/rockcookies/skills --skill vue-jsx-best-practices-rockcookies

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developers migrating from React to Vue often write JSX with React conventions like className and htmlFor, which cause TypeScript errors and inconsistent code style in Vue projects. ## Core Features & Use Cases - Attribute Convention Guidance: Explains that Vue JSX uses standard HTML attributes (class, for) instead of React's className and htmlFor. - TypeScript and Vite Configuration: Provides tsconfig.json settings (jsxImportSource: vue) and @vitejs/plugin-vue-jsx setup for proper JSX type inference. - Use Case: When migrating a React component library to Vue 3, use this Skill to update all JSX attribute names, event handlers, and build configuration so the code compiles without type errors. ## Quick Start Ask the assistant to review your Vue JSX or TSX code and fix any React-style attributes like className or htmlFor.

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 use JSX in Vue 3?▼

Use standard HTML attribute names like class and for instead of React's className and htmlFor. Configure tsconfig.json with jsx set to preserve and jsxImportSource set to vue, then add @vitejs/plugin-vue-jsx to your Vite plugins.

What is the difference between Vue JSX and React JSX?▼

Vue JSX uses standard HTML attribute names (class, for, tabindex) while React uses JavaScript-friendly names (className, htmlFor, tabIndex). Vue also uses onInput for live updates where React uses onChange.

Why does className cause TypeScript errors in Vue JSX?▼

Vue's JSX type definitions only accept standard HTML attributes, so className and htmlFor fail type checking. Vue's runtime is lenient and converts them, but using HTML attributes ensures type safety and consistency with Vue templates.

How do I configure TypeScript for Vue JSX?▼

Set jsx to preserve and jsxImportSource to vue in tsconfig.json compilerOptions. Since Vue 3.4 no longer registers the global JSX namespace, jsxImportSource is required for TypeScript to use Vue's JSX type definitions.

How do I handle events in Vue JSX?▼

Use the on prefix with event names, such as onClick and onInput. For event modifiers, wrap the handler with Vue's withModifiers helper, for example withModifiers(handleClick, ['self']).

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
EIS-ITSEIS-ITS

Frontend Components

Create reusable, composable UI components for React, Vue, Svelte, and web components.

Official
Intermediate
aiaihomeaiaihome

vue-jsx-best-practices

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

Community
Intermediate
PatternsDevPatternsDev
235

render-functions

Build Vue components programmatically using render functions and JSX.

Official
Intermediate