skills.rest
jaypatrick
jaypatrickCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vue-jsx-best-practices

Document Vue 3 JSX best practices and TypeScript tooling configuration.

Updated Mar 17, 2026
Search Tags:#typescript#frontend#vue#migration#jsx#vue3
One-click install
npx skills add https://github.com/jaypatrick/skills --skill vue-jsx-best-practices-jaypatrick
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/jaypatrick/skills/tree/main/vue-jsx-best-practices
Command: npx skills add https://github.com/jaypatrick/skills --skill vue-jsx-best-practices-jaypatrick

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue JSX best practices help developers write Vue-compatible JSX, avoiding React-specific conventions and common pitfalls.

Core Features & Use Cases

  • Understand differences between Vue JSX and React JSX, including attribute naming and event handling
  • Configure TypeScript and tooling (tsconfig.json, vite-plugin-vue-jsx) for Vue JSX typing and DX
  • Migrate existing React JSX to Vue JSX with safe, predictable results

Quick Start

Refactor a React-style JSX snippet into Vue JSX by converting className to class and htmlFor to for, and adapting event handlers to Vue conventions.

Frequently Asked Questions about vue-jsx-best-practices

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

FAQPage Schema
What are the key differences between Vue JSX and React JSX?▼

Vue JSX differs from React JSX primarily in HTML attribute naming and event handling conventions. You must use `class` instead of `className` and `for` instead of `htmlFor`, adapting event handlers to Vue-specific syntax rather than React conventions.

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

To configure Vue JSX typing, you need to set up `tsconfig.json` and install the `vite-plugin-vue-jsx` plugin. This tooling setup ensures proper TypeScript support and developer experience when writing TSX components in Vue 3 projects.

Can I migrate existing React JSX code to Vue 3?▼

Yes, you can migrate existing React JSX to Vue JSX with safe, predictable results. The process involves refactoring React-style snippets by converting attributes like `className` to `class` and adapting event handlers to Vue conventions.

Why does my Vue JSX component fail TypeScript type checks?▼

Vue JSX components fail TypeScript type checks when the `tsconfig.json` is not properly configured for TSX typing. You must ensure the correct Vite plugins and TypeScript settings are applied to support Vue 3 JSX typing and avoid compilation errors.

Related Skills

Explore More Software Engineering Skills→
stevessrstevessr

vue-jsx-best-practices

Configure Vue 3 JSX attributes and plugin settings for React migrations.

Community
Intermediate
NKDShinKuNKDShinKu

vue-jsx-best-practices

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

Community
Basic
DanielShuguangDanielShuguang

vite

Configure Vite projects, add plugins, and build for production.

Community
Intermediate
bingeli1379bingeli1379
2

vue-jsx-best-practices

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

Community
Intermediate