skills.rest
NKDShinKu
NKDShinKuCOMMUNITY
Explore all skills by this author →
GitHub

vue-jsx-best-practices

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

Updated Dec 30, 2025
Search Tags:#typescript#frontend#vue#jsx#react-migration#vue-jsx
One-click install
npx skills add https://github.com/NKDShinKu/NKDShinKu --skill vue-jsx-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/NKDShinKu/NKDShinKu/tree/main/.agents/skills/vue-jsx-best-practices
Command: npx skills add https://github.com/NKDShinKu/NKDShinKu --skill vue-jsx-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue developers transitioning from React JSX often face mismatches in attribute names and plugin configurations. This Skill provides clear guidance on Vue-specific JSX usage and best practices to keep code idiomatic.

Core Features & Use Cases

  • Attribute conventions: Use standard HTML attributes (class, for) instead of React-style className and htmlFor.
  • Plugin & TSX setup: Guidance on configuring Vue JSX support with tooling and TypeScript.
  • Migration guidance: Practical tips for converting React components to Vue JSX in real projects.

Quick Start

Ask the AI to convert a small React JSX snippet to Vue JSX following Vue conventions and provide corrected examples.

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 convert React JSX to Vue 3 JSX without attribute mismatches?▼

Vue 3 JSX requires standard HTML attributes like class and for instead of React-style className and htmlFor. You must also configure Vue's JSX plugin and TypeScript settings properly to support TSX components.

Why does my Vue TSX component fail to compile without a JSX plugin?▼

Vue TSX components require Vue's JSX plugin and proper TypeScript configuration to compile. Without this tooling setup, TypeScript cannot correctly parse and transform the JSX syntax in your Vue project.

What's the best way to handle class and for attributes in Vue JSX?▼

The best way to handle attributes in Vue JSX is to use standard HTML conventions, specifically class and for, rather than React's className and htmlFor. This keeps your Vue 3 TSX code idiomatic and clean.

Can I use TypeScript with Vue JSX in a React migration scenario?▼

Yes, TypeScript works with Vue JSX for React migration. You must configure Vue's JSX plugin with proper TypeScript settings and adapt your React component attributes to Vue conventions for a successful transition.

Do I need special TypeScript configuration for Vue TSX projects?▼

Yes, Vue TSX projects require special TypeScript configuration alongside Vue's JSX plugin. Properly configuring these tools ensures your JSX attribute handling and component compilation work correctly.

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
Cancey-DejeanCancey-Dejean

vue-jsx-best-practices

Explain Vue.js JSX attribute differences and configure TypeScript and Vite.

Community
Basic
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