Vue 3 JSX Migration Guide

The article, originally published on the ZooTeam blog, introduces the upcoming Vue 3 release and explains why adopting JSX can simplify component development, especially for complex applications. Vue 3 brings major refactors such as full TypeScript support, a rebuilt compiler, and a redesigned Virtual DOM.

It highlights the differences between Vue 2 and Vue 3 JSX handling, showing how Vue 3 aligns attribute passing more closely with React, removing the need for separate props , attrs , and domProps objects.

Several code snippets illustrate the contrast between template‑based rendering and JSX. For example, a dynamic heading component written with a template:

if (isTrue("I am planning to use Vue 3 for a new project")) {
  if (isTrue("I need IE11 support")) {
    await IE11CompatBuild() // July 2020
  }
  if (isTrue("RFCs are too dense, I need an easy-to-read guide")) {
    await migrationGuide() // July 2020
  }
  if (isTrue("I'd rather wait until it's really ready")) {
    await finalRelease() // Targeting early August 2020
  }
  run(`npm init vite-app hello-vue3`)
  return
}

and the equivalent JSX implementation that reduces boilerplate:

const App = {
  render() {
    const tag = `h${this.level}`
    return
{this.$slots.default}
}
}

The guide explains how Ant Design Vue (antdv) adopted JSX early and collaborated with the Vue team to create @ant-design-vue/babel-plugin-jsx , which helps migrate existing Vue 2 JSX code to Vue 3.

Key migration considerations include:

Attribute passing changes – props and attrs are merged, allowing direct use of native HTML attributes.

Directive updates – v-model and v-show are now imported from ES modules.

Plugin options such as transformOn and compatibleProps that bridge Vue 2 event handling to Vue 3 conventions.

Handling of inheritAttrs which now affects class and style bindings.

Example plugin configuration:

{
  "plugins": ["@ant-design-vue/babel-plugin-jsx", { "transformOn": true, "compatibleProps": true }]
}

Additional snippets demonstrate functional components, fragments, and prop/attribute syntax in Vue 3 JSX, emphasizing the use of camelCase for directives (e.g., vModel ) while still supporting kebab‑case.

The article concludes that millions of developers use Vue, and while JSX remains a niche, tools like antdv make the transition smoother, encouraging developers to explore JSX as a powerful alternative to templates.

References to relevant repositories and issues are provided for readers who wish to dive deeper into the migration process.