Vue JSX best practices and differences from React JSX.
JSX
- Migrating React JSX code to Vue or getting attribute type errors → See render-function-jsx-vue-vs-react
vue-jsx-best-practices
JSX syntax in Vue (e.g., class vs className, JSX plugin config).
v1.0Latest
New~71Updated Jul 11, 2026
Files2
2 files · 5.1 KB
Select a file to preview
Overall Score
78/100
Grade
B
Good
Safety
90
Quality
75
Clarity
82
Completeness
68
Summary
This skill teaches Vue JSX syntax best practices, focusing on the key differences between Vue and React JSX conventions (e.g., `class` vs `className`, `for` vs `htmlFor`). It provides TypeScript configuration, code examples, and a reference table to help developers migrate React JSX code to Vue or avoid common attribute errors.
Detected Capabilities
documentation referencecode example provisiontypescript configuration guidance
Trigger Keywords
Phrases that MCP clients use to match this skill to user intent.
vue jsx syntaxmigrate react to vuevue tsx configurationvue jsx attributesclassName vs classvue jsx typescript
Referenced Domains
External domains referenced in skill content, detected by static analysis.
github.comvuejs.org
Use Cases
- Migrate React JSX components to Vue
- Fix TypeScript errors when writing Vue TSX
- Learn Vue JSX attribute naming conventions
- Configure TypeScript for proper Vue JSX type inference
- Understand Vue event handling in JSX
- Set up Vite with Vue JSX plugin support
Quality Notes
- Comprehensive coverage of Vue vs React JSX differences with concrete examples
- Well-structured reference document with task checklist for migration
- Includes TypeScript and Vite configuration examples
- Reference table clearly shows attribute mappings across React, Vue, and HTML
- Root SKILL.md is minimal—mostly acts as an entry point; substance is in supporting reference file
- Could benefit from troubleshooting section for common TS errors and their solutions
- Event modifier examples using `withModifiers` are helpful but could expand on other Vue-specific features
Model: claude-haiku-4-5-20251001Analyzed: Jul 11, 2026
Reviews
Add this skill to your library to leave a review.
No reviews yet
Be the first to share your experience.
Use vuejs-ai/vue-jsx-best-practices in your dev environment — a Developer account adds skills to your library and syncs them via the SkillRepo CLI.