hyf0/vue-jsx-best-practices

O que vue-jsx-best-practices faz?

Melhores práticas para uso da sintaxe JSX no Vue (ex.: class vs className, configuração de plugin JSX).

Diferenças entre JSX no React e no Vue

No Vue, ao usar JSX, algumas propriedades diferem do React:

• class (Vue) ao invés de className (React)
• style aceita objetos ou strings, sem a necessidade de camelCase forçado (mas camelCase é recomendado para consistência)
• Diretivas Vue como v-if, v-for e v-model possuem equivalentes em JSX (ex.: vModel para v-model)

Configuração do Plugin JSX

Para usar JSX no Vue, você precisa de um plugin de transformação JSX. No Babel, use @vue/babel-plugin-jsx:

npm install --save-dev @vue/babel-plugin-jsx

No arquivo de configuração do Babel (babel.config.js):

module.exports = {
  plugins: ['@vue/babel-plugin-jsx']
}

Para projetos com Vite, o suporte a JSX é nativo com Vue 3, mas certifique-se de que o plugin @vitejs/plugin-vue-jsx esteja instalado:

npm install --save-dev @vitejs/plugin-vue-jsx

E no vite.config.js:

import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [vueJsx()]
}

Exemplos de Uso

Usando class (Vue) ao invés de className

// Correto no Vue
const MyComponent = () => <div class="container">Hello</div>

// Errado (React)
const MyComponent = () => <div className="container">Hello</div>

Usando vModel para ligação bidirecional

import { ref } from 'vue'

const MyForm = () => {
  const input = ref('')
  return (
    <input vModel={input.value} placeholder="Digite algo" />
  )
}

Render Functions com JSX

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    return () => (
      <button onClick={() => count.value++}>
        Contagem: {count.value}
      </button>
    )
  }
})

Para mais detalhes, consulte a documentação oficial do Vue JSX.