Vue 2 JSX Babel Transform (for Babel 6)

3.7.0 · abandoned · verified Sun Apr 19

This Babel plugin, `babel-plugin-transform-vue-jsx`, provides JSX syntax support specifically for Vue.js 2.x applications when used with Babel 6. Its primary function is to transpile JSX elements within Vue components into `h` (createElement) function calls, enabling developers to write render functions using a more declarative, React-like syntax. The version 3.7.0, as specified, is part of the older branch designed for Babel 6. It is no longer actively maintained. For projects utilizing Babel 7 and Vue 2, the successor plugin `@vue/babel-plugin-transform-vue-jsx` (latest v1.4.0, published 4 years ago) should be used instead. For Vue 3 projects, `@vue/babel-plugin-jsx` (latest v2.0.1, published 5 months ago) is the recommended and actively maintained solution. This particular package (`babel-plugin-transform-vue-jsx` v3.7.0) does not follow a regular release cadence and is considered superseded for modern development environments.

Common errors

```
Cannot find module 'babel-plugin-syntax-jsx'
```
cause The `babel-plugin-syntax-jsx` package, which is a required peer dependency for this transform, has not been installed or is an incompatible version for Babel 6.

fix Install `babel-plugin-syntax-jsx` explicitly: `npm install babel-plugin-syntax-jsx --save-dev` or `yarn add babel-plugin-syntax-jsx --dev`.
```
ReferenceError: h is not defined
```
cause The `h` (createElement) function is not in scope within a JSX render function or component method. This can happen with older plugin versions or when auto-injection rules are not met.

fix For render functions, ensure `render(h) { ... }` or `const h = this.$createElement;` is present. For methods/getters, check plugin version (3.4.0+ for auto-inject) and ensure they are ES2015 methods, not arrow functions or regular functions.

Warnings

breaking This specific plugin version (3.x) is only compatible with Babel 6. It will not work with Babel 7 or later due to API changes in Babel itself. Using it with Babel 7+ will lead to configuration errors.
Fix: For Babel 7 and Vue 2, use `@vue/babel-plugin-transform-vue-jsx`. For Vue 3, use `@vue/babel-plugin-jsx`.
deprecated This plugin is effectively superseded. The `vuejs/babel-plugin-transform-vue-jsx` package (which version 3.x belongs to) has not been updated in many years. Modern Vue 2 projects with Babel 7 should use `@vue/babel-plugin-transform-vue-jsx`, and Vue 3 projects should use `@vue/babel-plugin-jsx`.
Fix: Migrate to `@vue/babel-plugin-transform-vue-jsx` for Vue 2 + Babel 7, or `@vue/babel-plugin-jsx` for Vue 3 projects.
gotcha Only `v-show` is natively supported among Vue's built-in directives in JSX. Other directives like `v-if`, `v-for`, and `v-model` require manual programmatic equivalents (e.g., ternary operators for `v-if`, `map` for `v-for`). Custom directives can be used via `v-name={value}` syntax, but arguments and modifiers are not directly supported.
Fix: Use programmatic equivalents (ternary, .map()) for unsupported directives or pass directive data as objects for custom directives. Refer to the plugin's documentation for detailed workarounds.
gotcha While `h` (createElement) auto-injection was introduced in version 3.4.0 for ES2015 methods and getters, it does not apply to functions or arrow functions. You still need to explicitly pass `h` as an argument or define `const h = this.$createElement` in those cases.
Fix: Ensure `h` is in scope for render functions, especially with arrow functions or regular functions, by explicitly declaring it or passing it as a parameter.

Install

npm install babel-plugin-transform-vue-jsx npm
yarn add babel-plugin-transform-vue-jsx yarn
pnpm add babel-plugin-transform-vue-jsx pnpm

Imports

babel-plugin-transform-vue-jsx
wrong:
```
import { transformVueJsx } from 'babel-plugin-transform-vue-jsx';
```
correct:
```
{ "plugins": ["transform-vue-jsx"] }
```
Babel plugins are configured in .babelrc or babel.config.js, not imported directly into application code. The plugin name 'transform-vue-jsx' is used in the configuration array.

Quickstart

This .babelrc configuration enables JSX transformation for Vue 2 applications using Babel 6. It includes the necessary syntax plugin and the transform plugin.

{
  "presets": [
    ["env", {
      "targets": { "node": "current" }
    }]
  ],
  "plugins": [
    "babel-plugin-syntax-jsx",
    "babel-plugin-transform-vue-jsx"
  ]
}

view raw JSON →