vue-jsx-best-practices

Standardize Vue JSX attribute names for Vue 3 projects.

9|Updated Sep 4, 2024

Search Tags:#typescript #vue #migration #jsx #tsx #vue-jsx #attribute-naming

Ready to run

npx skills add https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template --skill vue-jsx-best-practices-zuiaizengdada

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template/tree/main/.agents/skills/vue-jsx-best-practices
Command: npx skills add https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template --skill vue-jsx-best-practices-zuiaizengdada

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue JSX often confuses developers migrating from React, leading to incorrect attribute names and integration issues. This Skill provides guidelines and examples to align Vue JSX usage with HTML attribute conventions and Vue's JSX runtime.

Core Features & Use Cases

Unified attribute naming: Use class and for in Vue JSX to align with templates.
TSX/JSX setup guidance: Configuring TypeScript and Vite to enable Vue JSX tooling.
Migration guidance: Refactor patterns when converting React components to Vue JSX.

Quick Start

Install and configure the Vue JSX environment and review the example migration doc to ensure correct attribute usage.

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 Vue JSX attributes correctly when migrating from React?▼

When migrating from React to Vue JSX, use standard HTML attribute names like `class` and `for` instead of React's `className` and `htmlFor` to align with Vue's template conventions and JSX runtime.

Why does my Vue TSX component fail to render properly?▼

Vue TSX components often fail due to incorrect attribute naming or missing tooling. Ensure you use HTML conventions like `class` and configure the Vue JSX plugin with Vite or Vue CLI for type-safety.

What is the best way to configure TypeScript and Vite for Vue JSX?▼

Configuring Vue JSX requires installing the Vue JSX plugin and updating your Vite or Vue CLI settings. This setup enables TSX/JSX tooling, ensuring type-safety and a consistent developer experience across your components.

Do I need a specific Vue CLI setup to use TSX in Vue 3?▼

Yes, you need proper TSX configuration and tooling in your Vue 3 project. Configuring the Vue JSX plugin with Vite or Vue CLI is required to enable the type-safety and runtime support for TSX/JSX components.

Can I use React component patterns directly in Vue JSX?▼

No, applying React component patterns directly in Vue JSX leads to integration issues and incorrect attribute names. You must refactor these patterns to align with Vue's JSX runtime and HTML attribute conventions.