Vue Jsx Best Practices

Vue JSX Best Practices is a community skill for writing Vue components using JSX syntax, covering render functions, TSX typing, directive equivalents, slot patterns, and composition API integration for JSX-based Vue development.

What Is This?

Overview

Vue JSX Best Practices provides patterns for building Vue components using JSX instead of Single File Component templates. It covers render function syntax with JSX for expressing component trees using JavaScript expressions, TSX type annotations for type-safe props, events, and slot definitions, directive equivalents for v-if, v-for, v-model, and v-show in JSX context, slot rendering patterns using JSX callbacks for scoped and named slots, and Composition API integration with setup returning JSX render functions. The skill enables Vue developers to leverage JSX when template syntax is insufficient for dynamic rendering logic or when migrating from React-style codebases.

Who Should Use This

This skill serves Vue developers who prefer JSX for complex dynamic rendering, teams migrating React components to Vue while keeping JSX syntax, and engineers building component libraries that need programmatic render logic.

Why Use It?

Problems It Solves

Template syntax has limitations for highly dynamic component rendering that depends on runtime conditions. TypeScript integration in templates lacks the full type checking available in TSX. Complex slot forwarding and render delegation patterns are verbose in template syntax. Programmatic component generation from data structures needs JavaScript expression support.

Core Highlights

JSX render functions express component trees with full JavaScript control flow. TSX typing validates props and events at compile time. Directive replacements implement v-model and v-show with JSX equivalents. Slot callbacks provide scoped slot data through function parameters.

How to Use It?

Basic Usage

import { defineComponent, ref }
  from 'vue';

export const Counter = defineComponent({
  name: 'Counter',
  props: {
    initial: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const count = ref(props.initial);
    const increment = () => {
      count.value++;
    };

    return () => (
      <div class="counter">
        <span>{count.value}</span>
        <button onClick={increment}>
          Add
        </button>
      </div>
    );
  },
});

// Conditional rendering
export const StatusBadge =
  defineComponent({
    props: {
      status: {
        type: String as () =>
          'active' | 'inactive',
        required: true,
      },
    },
    setup(props) {
      return () => (
        <span class={{
          badge: true,
          active:
            props.status === 'active',
        }}>
          {props.status === 'active'
            ? 'Online' : 'Offline'}
        </span>
      );
    },
  });

Real-World Examples

import { defineComponent, type PropType }
  from 'vue';

interface Column<T> {
  key: keyof T;
  label: string;
  render?: (value: T[keyof T],
    row: T) => JSX.Element;
}

export const DataTable = defineComponent({
  name: 'DataTable',
  props: {
    columns: {
      type: Array as PropType<
        Column<Record<string, unknown>>[]
      >,
      required: true,
    },
    rows: {
      type: Array as PropType<
        Record<string, unknown>[]
      >,
      required: true,
    },
  },
  setup(props) {
    return () => (
      <table>
        <thead>
          <tr>
            {props.columns.map(
              (col) => (
                <th key={
                  String(col.key)}>
                  {col.label}
                </th>
              )
            )}
          </tr>
        </thead>
        <tbody>
          {props.rows.map(
            (row, i) => (
              <tr key={i}>
                {props.columns.map(
                  (col) => (
                    <td key={
                      String(col.key)}>
                      {col.render
                        ? col.render(
                            row[col.key],
                            row)
                        : String(
                            row[
                              col.key]
                          )}
                    </td>
                  )
                )}
              </tr>
            )
          )}
        </tbody>
      </table>
    );
  },
});

Advanced Tips

Use v-model in JSX with the modelValue prop and onUpdate:modelValue event for two-way binding on custom components. Implement v-show behavior using inline style display property toggling rather than conditional rendering. Use fragments with empty JSX tags to return multiple root elements.

When to Use It?

Use Cases

Build a dynamic table component that accepts column render functions for custom cell formatting. Create a form builder that generates input components from a schema definition at runtime. Implement a component library where render logic requires full JavaScript expression support.

Related Topics

Vue render functions, JSX syntax, TypeScript integration, component composition, and template alternatives.

Important Notes

Requirements

Vue 3 with the JSX transform plugin configured in Vite or webpack. TypeScript for TSX type checking support. Babel plugin for Vue JSX if using older build configurations.

Usage Recommendations

Do: prefer templates for simple components and reserve JSX for cases requiring dynamic render logic. Use defineComponent for proper TypeScript inference on props and events. Keep JSX render functions focused by extracting sub-render helpers.

Don't: convert all components to JSX when templates are simpler and more readable for static layouts. Forget that Vue JSX uses onChange instead of onInput for native input events. Mix template and JSX syntax in the same SFC file.

Limitations

Vue directives like v-model require manual implementation in JSX rather than simple attribute syntax. IDE support for Vue JSX is less mature than template tooling in some editors. Some Vue features like CSS scoping are not available in JSX-only components.