@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.
  • The default value is false;
  • When set to 'auto' (or true), it will detect the Vue version in the project. If it's >= 2.7, it will import the composition utilities from vue, otherwise from @vue/composition-api;
  • When set to 'native' (or 'naruto'), it will always import the composition utilities from vue
  • When set to plugin, it will always import the composition utilities from @vue/composition-api, but it will redirect to 'vue' itself when the vue version is 2.7.x
  • When set to vue-demi, it will always import the composition utilities from vue-demi
  • When set to an object like { importSource: string; }, it will always import the composition utilities from the importSource you set
• 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

1.3.1 (2022-07-21)

other

Bug Fixes

• relax the vue peer dependency version requirement (8b5f023)

1.3.0 (2022-07-06)

other

Features

• add importSource option (#284) (abffc65)
• rework the compositionAPI option of the preset to support Vue 2.7 (e7d094e)

1.2.4 (2020-10-27)

other

Bug Fixes

• composition-api-render-instance: store currentInstance in variable for render instance (#168) (a3525bf)

1.2.3 (2020-10-20)

other

Bug Fixes

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

1.2.2 (2020-10-17)

other

Bug Fixes

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

1.2.1 (2020-10-16)

other

Bug Fixes

• add composition-api packages to dependencies (cd9db9f)

1.2.0 (2020-10-16)

other

Features

• add @vue/composition-api support (#142) (ecc6ed6)
• allow prior babel plugins to traverse JSX tree throughly, close #86 (b49fa8a)
• change all sugar plugins to work without pre-traversing the Program (0943580)

1.1.2 (2019-11-09)

other

Bug Fixes

• add @babel/core to peerDependencies (f60f316)

1.1.1 (2019-10-11)

other

Bug Fixes

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

1.1.0 (2019-07-23)

other

Bug Fixes

• support for .passive modifier (01177c8)

1.0.0 (2019-05-08)

other

Bug Fixes

• Support props with underscore, close #55 (852481c)

1.0.0-beta.3 (2019-03-22)

other

Bug Fixes

• filter out jsx comments in getChildren (7f0c84c), closes #46
• fix incorrect repository urls (99380b3)

1.0.0-beta.2 (2019-01-11)

other

Bug Fixes

• remove extraneous peer deps (29414a7)

• Trim whitespaces properly, fix #37 (54c75ee)

  Features

• Support root-level attributes, close #32 (96b182c)

1.0.0-beta.1 (2018-12-25)

other

Bug Fixes

• Add events at the begining of argument list (0604214)
• Add staticClass as root attribute (cd3bab1)
• Do not trim all spaces (c5ebfac)
• Fix failing tests (21213df)
• Force html & svg tags to always be treated as string tags (12a311e)
• proper support for camelCase (a903610)
• Support camelCase directives (6a43377)
• Support default export in functional component (7e6f893)

• throw an error if v-model is used with a string (82d6bcb)

  Features

• Add release utilities (4bb22fb)

• add support for argument and modifiers for directives (0085b8f)
• change the syntax for argument and modifiers (b1c8036)
• Event modifiers for v-on (cef09bb)
• implement babel preset (1137c1d)
• Support vModel in kebab-case components (dc0e29f)
• Treat string as component if declared in scope (51ca488)