Releases: vuejs/jsx-vue2
v1.4.0
v1.3.1
Loosen the peer dependency requirement to avoid peer dependency warnings in Vue CLI projects.
v1.3.0
New Features
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.$createElement
1, 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 globalh
overthis.$createElement
.
The globalh
requirescurrentInstance
to be present when executing.
In some legacy codebases, a standalone render function might rely on itsthis
context rather than the runtimecurrentInstance
. So there may be incompatibilities.
If you encounter such issues after turning the flag on, you can manually addconst h = this.$createElement
to the beginning of the problematic function. The JSX plugin won't override your explicitly definedh
. ↩
v1.2.4
v1.2.3
Bug Fixes
- v-model/v-on should apply before arrow-functions transform (#167) (319932e), closes #87 /github.com/vuejs/jsx/issues/165#issuecomment-712603569
v1.2.2
v1.2.1
New Features
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,
},
},
],
],
};
v1.2.0
v1.2.0