@vue/babel-sugar-composition-api-inject-h

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¹, 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. ↩