{"id":10550,"library":"babel-plugin-transform-vue-jsx","title":"Vue 2 JSX Babel Transform (for Babel 6)","description":"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.","status":"abandoned","version":"3.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/babel-plugin-transform-vue-jsx","tags":["javascript","vue","babel","jsx"],"install":[{"cmd":"npm install babel-plugin-transform-vue-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-vue-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-vue-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for merging props and attributes when using JSX spread attributes, particularly for Babel 6 compatible versions.","package":"babel-helper-vue-jsx-merge-props","optional":false},{"reason":"Provides the base JSX parsing capabilities for Babel 6 to understand JSX syntax before transformation.","package":"babel-plugin-syntax-jsx","optional":false}],"imports":[{"note":"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.","wrong":"import { transformVueJsx } from 'babel-plugin-transform-vue-jsx';","symbol":"babel-plugin-transform-vue-jsx","correct":"{ \"plugins\": [\"transform-vue-jsx\"] }"}],"quickstart":{"code":"{\n  \"presets\": [\n    [\"env\", {\n      \"targets\": { \"node\": \"current\" }\n    }]\n  ],\n  \"plugins\": [\n    \"babel-plugin-syntax-jsx\",\n    \"babel-plugin-transform-vue-jsx\"\n  ]\n}","lang":"json","description":"This .babelrc configuration enables JSX transformation for Vue 2 applications using Babel 6. It includes the necessary syntax plugin and the transform plugin."},"warnings":[{"fix":"For Babel 7 and Vue 2, use `@vue/babel-plugin-transform-vue-jsx`. For Vue 3, use `@vue/babel-plugin-jsx`.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Migrate to `@vue/babel-plugin-transform-vue-jsx` for Vue 2 + Babel 7, or `@vue/babel-plugin-jsx` for Vue 3 projects.","message":"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`.","severity":"deprecated","affected_versions":"<=3.7.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.4.0"}],"env_vars":null,"search_vec":"'2':2,25,91 '3':108 '3.7.0':65 '4':99 '5':114 '6':8,32,77 '7':88 'activ':82,121 'ago':101,116 'applic':27 'babel':4,7,10,13,31,76,87,128,151 'babel-plugin-transform-vue-jsx':12,127 'branch':73 'cadenc':140 'call':48 'compon':43 'consid':143 'createel':46 'declar':58 'design':74 'develop':50,147 'element':40 'enabl':49 'environ':148 'follow':136 'function':35,47,54 'h':45 'instead':105 'javascript':149 'jsx':3,17,19,39,132,152 'latest':96,111 'like':61 'longer':81 'maintain':83,122 'modern':146 'month':115 'older':72 'packag':126 'part':69 'particular':125 'plugin':11,14,94,129 'primari':34 'project':85,109 'provid':18 'publish':98,113 'react':60 'react-lik':59 'recommend':119 'regular':138 'releas':139 'render':53 'solut':123 'specif':22 'specifi':67 'successor':93 'supersed':144 'support':21 'syntax':20,62 'transform':5,15,130 'transpil':38 'use':29,55,104 'util':86 'v1.4.0':97 'v2.0.1':112 'v3.7.0':133 'version':64 'vue':1,16,42,90,107,131,150 'vue.js':24 'vue/babel-plugin-jsx':110 'vue/babel-plugin-transform-vue-jsx':95 'within':41 'write':52 'x':26 'year':100","created_at":"2026-04-19T13:33:23.376938+00:00","updated_at":"2026-04-19T13:33:23.376938+00:00","problems":[{"fix":"Install `babel-plugin-syntax-jsx` explicitly: `npm install babel-plugin-syntax-jsx --save-dev` or `yarn add babel-plugin-syntax-jsx --dev`.","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.","error":"Cannot find module 'babel-plugin-syntax-jsx'"},{"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.","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.","error":"ReferenceError: h is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/vuejs/babel-plugin-transform-vue-jsx","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/babel-plugin-transform-vue-jsx","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization","http-networking","data","testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}