@vue/babel-preset-jsx

Babel preset for Vue JSX

Usage no npm install needed!

<script type="module">
  import vueBabelPresetJsx from 'https://cdn.skypack.dev/@vue/babel-preset-jsx';
</script>

README

@vue/babel-preset-jsx

Configurable preset for Vue JSX plugins.

Babel Compatibility Notes

This repo is only compatible with Babel 7.x, for 6.x please use vuejs/babel-plugin-transform-vue-jsx

Usage

Install the dependencies:

# for yarn:
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# for npm:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save

In your babel.config.js:

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

You can toggle specific features, by default all features (except compositionAPI) are enabled, e.g.:

module.exports = {
  presets: [
    [
      '@vue/babel-preset-jsx',
      {
        vModel: false,
        compositionAPI: true,
      },
    ],
  ],
}

Options are:

compositionAPI - Enables @vue/babel-sugar-composition-api-inject-h and @vue/babel-sugar-composition-api-render-instance, support returning render function in setup.
functional @vue/babel-sugar-functional-vue - Functional components syntactic sugar
injectH @vue/babel-sugar-inject-h - Automatic h injection syntactic sugar
vModel @vue/babel-sugar-v-model - vModel syntactic sugar
vOn @vue/babel-sugar-v-on - vOn syntactic sugar