¿Qué hace vue-jsx-mejores-prácticas?
Sintaxis JSX en Vue (por ejemplo, class vs className, configuración del plugin JSX).
¿Por qué Vue JSX?
Vue JSX te permite escribir componentes de Vue usando sintaxis JSX, ofreciendo una alternativa a las plantillas basadas en HTML. Es particularmente útil cuando necesitas más poder expresivo o cuando estás migrando desde React.
Diferencias clave con JSX de React
class vs className
En Vue JSX, debes usar class en lugar de className:
// Correcto (Vue)
<div class="container">Hola</div>
// Incorrecto (React)
<div className="container">Hola</div>
v-model
Vue JSX soporta la directiva v-model para enlace bidireccional:
<input v-model={message} />
También puedes especificar el modificador:
<input v-model:trim={message} />
Eventos
Los eventos en Vue JSX usan la sintaxis on + nombre del evento:
<button onClick={() => handleClick()}>Clic</button>
A diferencia de React, no necesitas pasar referencias a funciones con .bind o flechas.
Props
Los props se pasan como en React:
<MiComponente titulo="Hola" mostrar={true} />
Pero las props con guiones deben convertirse a camelCase:
// Correcto
<MiComponente isActive={true} />
// Incorrecto
<MiComponente is-active={true} />
Slots
Para slots con nombre, usa v-slots o la sintaxis corta #:
<MiComponente v-slots={{
header: () => <header>Encabezado</header>,
default: () => <p>Contenido</p>
}} />
O usando la sintaxis corta:
<MiComponente>
{{
header: () => <header>Encabezado</header>,
default: () => <p>Contenido</p>
}}
</MiComponente>
Configuración del plugin JSX
Vite
Instala el plugin oficial:
npm install @vitejs/plugin-vue-jsx
Configura en vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [vue(), vueJsx()]
})
Webpack / Vue CLI
Para proyectos con Webpack o Vue CLI, instala @vue/babel-plugin-jsx:
npm install @vue/babel-plugin-jsx -D
Luego agrega a tu configuración de Babel:
{
"plugins": ["@vue/babel-plugin-jsx"]
}
Nuxt
Nuxt 3 ya incluye soporte para JSX por defecto. Solo asegúrate de tener habilitado el plugin Vue JSX en tu nuxt.config.ts:
export default defineNuxtConfig({
vue: {
jsx: true
}
})
Buenas prácticas
- Usa plantillas cuando sea posible: Las plantillas de Vue son más declarativas y tienen mejores optimizaciones de compilación.
- Usa JSX para componentes dinámicos: Cuando necesites lógica condicional compleja o bucles, JSX puede ser más legible.
- Mantén el JSX limpio: Divide componentes grandes en partes más pequeñas.
- Escribe pruebas: JSX puede ser más difícil de depurar que las plantillas, así que asegúrate de probar bien.