New: your coding agent can read the release notes before it upgrades. Set up the MCP server →
Babel preset for Vue JSX
Last release 4 years ago
no release in 18 months
Ships unpredictably
gaps range from 2 weeks to 1.7 years
Nearly every release is documented
notes for 12 of 13 stable releases
Nothing withdrawn
no release was ever pulled
8 years old
16 releases · first in 2018
If you need to use vue-demi to support both Vue <= 2.6 and Vue 2.7, you can now set the compositionAPI option to 'vue-demi' .
@vue/babel-preset-jsx
vue-demi to support both Vue <= 2.6 and Vue 2.7, you can now set the compositionAPI option to 'vue-demi'.compositionAPI option now also accepts an object { importSource: 'package-name' } to allow further customization.Loosen the peer dependency requirement to avoid peer dependency warnings in Vue CLI projects.
One column per quarter.
Loosen the peer dependency requirement to avoid peer dependency warnings in Vue CLI projects.
Composition API support (originally added in v1.2.1 ) now works with Vue 2.7 "Naruto" .
Composition API support (originally added in v1.2.1) now works with Vue 2.7 "Naruto".
If you've already used it in projects with @vue/composition-api, no additional configuration is required.
We'll automatically switch to the built-in methods in vue if Vue.js >= 2.7 is detected.
You can also have finer control over this behavior, see the preset README for more options.
This feature is opt-in, because there are subtle differences between the global h function and this.$createElement1, which may affect some legacy codebases.
It's safe to use it in new projects, though.
To enable this feature, turn on the compositionAPI flag in @vue/babel-preset-jsx:
// babel.config.js
module.exports = {
presets: [
[
"@vue/babel-preset-jsx",
{
compositionAPI: true,
},
],
],
};If you are using the preset provided by Vue CLI, the flag is a subfield of the jsx option:
// babel.config.js
module.exports = {
presets: [
[
"@vue/cli-plugin-babel/preset",
{
jsx: {
compositionAPI: true,
},
},
],
],
};When the compositionAPI flag is on, we prefer the global h over this.$createElement.
The global h requires currentInstance to be present when executing.
In some legacy codebases, a standalone render function might rely on its this context rather than the runtime currentInstance. So there may be incompatibilities.
If you encounter such issues after turning the flag on, you can manually add const h = this.$createElement to the beginning of the problematic function. The JSX plugin won't override your explicitly defined h. ↩
composition-api-render-instance: store currentInstance in variable for render instance, fix v-model & v-on callback in setup functions
v-model/v-on should apply before arrow-functions transform ( #167 ) ( 319932e ), closes #87 /github.com/vuejs/jsx/issues/165#issuecomment-712603569
functional-vue & inject-h should traverse before JSX plugin ( #166 ) ( 8969609 ), closes #165
Added @vue/composition-api support, thanks to @luwanquan and @antfu .
Added @vue/composition-api support, thanks to @luwanquan and @antfu.
To enable this feature, turn on the compositionAPI flag in @vue/babel-preset-jsx:
// babel.config.js
module.exports = {
presets: [
[
"@vue/babel-preset-jsx",
{
compositionAPI: true,
},
],
],
};If you are using the preset provided by Vue CLI, the flag is a subfield of the jsx option:
// babel.config.js
module.exports = {
presets: [
[
"@vue/cli-plugin-babel/preset",
{
jsx: {
compositionAPI: true,
},
},
],
],
};@vue/babel-plugin-transform-vue-jsx , @vue/babel-preset-jsx , @vue/babel-sugar-functional-vue , @vue/babel-sugar-inject-h , @vue/babel-sugar-v-model ,
@vue/babel-plugin-transform-vue-jsx, @vue/babel-preset-jsx, @vue/babel-sugar-functional-vue, @vue/babel-sugar-inject-h, @vue/babel-sugar-v-model, @vue/babel-sugar-v-on:
@babel/core to peerDependencies, as it's required by @babel/plugin-syntax-jsx@vue/babel-preset-jsx , @vue/babel-sugar-v-model :
@vue/babel-preset-jsx, @vue/babel-sugar-v-model:
## other #### Bug Fixes * support for .passive modifier
Support props with underscore, close #55
filter out jsx comments in getChildren (7f0c84c), closes #46
Add events at the begining of argument list
Nothing published for this version
Your coding agent can read these notes before it upgrades. Set up the MCP server →