skills.rest
Cancey-Dejean
Cancey-DejeanCOMMUNITY
Explore all skills by this author →
GitHub

vue-jsx-best-practices

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

Updated Nov 3, 2024
Search Tags:#typescript#best practices#vue#configuration#jsx#react migration
One-click install
npx skills add https://github.com/Cancey-Dejean/vue-storybook-starter-clean --skill vue-jsx-best-practices-cancey-dejean
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-jsx-best-practices
Source: https://github.com/Cancey-Dejean/vue-storybook-starter-clean/tree/main/.agents/skills/vue-jsx-best-practices
Command: npx skills add https://github.com/Cancey-Dejean/vue-storybook-starter-clean --skill vue-jsx-best-practices-cancey-dejean

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common confusion and potential errors when using JSX syntax within Vue.js projects, particularly the differences in attribute naming conventions compared to React.

Core Features & Use Cases

  • Attribute Mismatch: Clarifies the use of class vs className and for vs htmlFor in Vue JSX.
  • TypeScript Errors: Explains how incorrect attribute usage leads to TypeScript errors.
  • Configuration Guidance: Provides necessary tsconfig.json and vite.config.ts settings for proper Vue JSX support.
  • Use Case: When migrating React components to Vue or developing new Vue components with JSX, ensure you use standard HTML attributes like class and for to avoid type errors and maintain code consistency.

Quick Start

Configure your Vue project to correctly use JSX by updating your tsconfig.json and vite.config.ts files.

Frequently Asked Questions about vue-jsx-best-practices

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

FAQPage Schema
Why does Vue JSX throw TypeScript errors for className or htmlFor?▼

Vue JSX throws TypeScript errors because it expects standard HTML attributes like `class` and `for` instead of `className` or `htmlFor`, which are React-specific conventions.

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

To configure Vue JSX support, you must update your `tsconfig.json` and `vite.config.ts` files with the specific compiler options and Vite plugins required for proper TSX compilation.

What is the correct attribute syntax when migrating React components to Vue JSX?▼

When migrating React components to Vue JSX, use standard HTML attributes such as `class` and `for` instead of `className` or `htmlFor` to avoid type errors and maintain code consistency.

Can I use React JSX attribute conventions in Vue TSX files?▼

No, using React JSX attribute conventions like `className` in Vue TSX files leads to TypeScript errors; Vue requires standard HTML attributes like `class` for consistent JSX development.

What are the limitations of using JSX syntax in Vue.js?▼

A key limitation is that Vue JSX does not support React's attribute naming conventions, meaning developers must adapt to standard HTML attributes and configure TypeScript settings to prevent type errors.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
ViewableGravyViewableGravy

react_always

Enforce React authoring rules for `.tsx` files and component modifications.

Community
Basic
NKDShinKuNKDShinKu

vue-jsx-best-practices

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

Community
Basic
chriscarteruxchriscarterux

test

Generate and execute tests for completed software development stories.

Community
Intermediate