0Pricing
Vue Academy · Aula

JSX no Vue 3 com Vite

@vitejs/plugin-vue-jsx, pragma JSX, componentes funcionais e compromissos entre JSX e templates.

JSX no Vue 3 com Vite é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

JSX no Vue 3

JSX permite escrever uma sintaxe semelhante à marcação dentro do JavaScript, que é compilada em chamadas de h. O Vue 3 oferece suporte a JSX por meio de um plug-in dedicado do Babel integrado ao Vite.

Instalando o plug-in

O pacote oficial é @vitejs/plugin-vue-jsx. Instale-o como uma dependência de desenvolvimento junto com o plug-in regular do Vue.

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

Configurando vite.config.ts

Adicione vueJsx() à matriz de plugins em vite.config.ts. Ele deve ser listado para que o Vite transforme os arquivos JSX.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

A extensão de arquivo .tsx

Os componentes escritos em JSX usam a extensão .tsx (ou .jsx). O plug-in processa somente arquivos com essas extensões.

// Greeting.tsx
export default () => <div>Hello</div>;

Um componente funcional

O componente mais simples é uma função de seta que retorna um elemento JSX. A classe e o texto aparecem exatamente como em HTML.

const Comp = () => <div class="box">text</div>;

export default Comp;

class, não className

Ao contrário do React, o JSX do Vue usa class, não className. O mesmo se aplica a for nos rótulos.

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

Valores dinâmicos

Inclua expressões entre chaves. As referências reativas são lidas com .value dentro do corpo de renderização.

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

Manipuladores de eventos com camelCase

Os ouvintes usam o prefixo on em camelCase: onClick, onInput, onMouseenter. O manipulador é uma função.

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

Renderização condicional

JSX não tem v-if. Use operadores ternários ou expressões lógicas para produzir elementos condicionalmente.

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

Renderizando listas

Substitua v-for por map. Forneça uma key para cada elemento, assim como nos modelos.

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

Usando defineComponent para propriedades

Para propriedades tipadas e ciclo de vida, envolva sua lógica em defineComponent. A função setup retorna uma função de renderização que retorna JSX.

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

Verificação rápida

Qual plug-in habilita JSX em um projeto Vite com Vue 3 e onde ele deve ser adicionado?

Recapitulação

O JSX do Vue 3 é habilitado adicionando vueJsx() de @vitejs/plugin-vue-jsx à matriz de plug-ins do Vite e escrevendo os componentes em arquivos .tsx. Use class, não className, manipuladores onClick em camelCase e defineComponent quando precisar de propriedades tipadas.

Perguntas Frequentes

A aula “JSX no Vue 3 com Vite” é grátis?

Sim — o texto completo de “JSX no Vue 3 com Vite” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “JSX no Vue 3 com Vite”?

@vitejs/plugin-vue-jsx, pragma JSX, componentes funcionais e compromissos entre JSX e templates. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “JSX no Vue 3 com Vite”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. A função h() em detalhes
  2. JSX no Vue 3 com Vite
  3. Componentes dinâmicos com funções render
  4. Padrão de componentes de ordem superior (HOC)
← Voltar para Vue Academy