jsx-vue2

New Features

@vue/babel-preset-jsx

• 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'.
• The 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.

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,
        },
      },
    ],
  ],
};

[^1]: 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.

Bug Fixes

• composition-api-render-instance: store currentInstance in variable for render instance, fix v-model & v-on callback in setup functions (#168) (a3525bf)

Bug Fixes

• v-model/v-on should apply before arrow-functions transform (#167) (319932e), closes #87 /github.com/vuejs/jsx/issues/165#issuecomment-712603569

Bug Fixes

• functional-vue & inject-h should traverse before JSX plugin (#166) (8969609), closes #165

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,
        },
      },
    ],
  ],
};

Bug Fixes

@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:

• add @babel/core to peerDependencies, as it's required by @babel/plugin-syntax-jsx
  (f60f316)

Bug Fixes

@vue/babel-preset-jsx, @vue/babel-sugar-v-model:

• v-model: create non-existent properties as reactive (05b9b3a)

New Features

@vue/babel-preset-jsx, @vue/babel-sugar-v-on:

• support for .passive modifier (#72)