Vue JSX Best Practices

Guidelines for Vue 3 components written with Composition API + <script lang="tsx"> + render functions, focused on a consistent JSX/TSX style.

Scope

• This skill applies when writing Vue 3 JSX/TSX components. It assumes the use of SFC with <script lang="tsx"> and defineComponent render functions as the standard style.

Why JSX instead of templates + <script setup>

• Templates with <script setup> introduce many “magic” features (compile-time macros, implicit exports, automatic ref unwrapping, etc.) that are not intuitive and require memorizing Vue-specific rules.
• JSX is just a TS/JS expression tree. As long as you understand {} interpolation and expressions, you can handle conditionals, loops, and slots; most of the time you are just writing normal TypeScript code.
• JSX works very well with the TypeScript type system: component props, slot functions, event callbacks, etc. all get full type inference and checking.
• The syntax is highly aligned with plain JS/TS (e.g. if/for/map, object/array spread, destructuring), which reduces mental overhead when switching between frameworks or stacks.

Always use JSX, never templates or <script setup>

• Prefer <script lang="tsx"> + defineComponent + render functions to implement components.
• Do not use Vue templates (<template>) or the <script setup> sugar; all view logic is expressed in JSX.