vuejs-ai/vue-jsx-mejores-prácticas

¿Qué hace vue-jsx-mejores-prácticas?

Sintaxis JSX en Vue (por ejemplo, class vs className, configuración del plugin JSX).

Resumen

Esta guía cubre las mejores prácticas para usar JSX en Vue.js, incluyendo:

• Diferencias entre class y className
• Configuración del plugin JSX para Babel
• Uso de atributos reactivos
• Manejo de eventos
• Slots y children

Configuración del Plugin

Para usar JSX en Vue, necesitas instalar y configurar el plugin @vue/babel-plugin-jsx:

npm install @vue/babel-plugin-jsx -D

Luego, agrégalo a tu configuración de Babel:

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

Diferencias Clave

• class: En Vue JSX, usa class en lugar de className
• style: Acepta objetos o strings, similar a React
• Eventos: Usa onClick, onChange, etc. (con mayúscula en la segunda letra)

Ejemplo de Componente

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    return () => (
      <div class="counter">
        <button onClick={() => count.value++}>Incrementar</button>
        <p>Contador: {count.value}</p>
      </div>
    )
  }
})

Slots

Para usar slots en JSX, puedes pasarlos como children:

<MiComponente>
  {{
    default: () => <p>Contenido por defecto</p>,
    header: () => <h2>Encabezado</h2>
  }}
</MiComponente>