Babel Vue Jsx

Posted on  by admin

Configurable preset for Vue JSX plugins.

Syntax

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

  • In your babel.config.js:. You can toggle specific features, by default all features (except compositionAPI) are enabled, e.g.:.

Template Compilation

compositionAPI - Enables @vue/babel-sugar-composition-api-inject-h and @vue/babel-sugar-composition-api-render-instance, support returning render function in setup.

@vue/babel-sugar-functional-vue - Functional components syntactic sugar.

@vue/babel-sugar-inject-h - Automatic .

[email protected]/babel-sugar-inject-h - Automatic h injection syntactic sugar. @vue/babel-sugar-v-model - . [email protected]/babel-sugar-v-model - vModel syntactic sugar. @vue/babel-sugar-v-on - . [email protected]/babel-sugar-v-on - vOn syntactic sugar.

Nodes, Trees, and the Virtual DOM

To add Vue JSX support. Install the plugin with:. Then add the plugin to .babelrc:. transform on: { click: xx } to onClick: xxx. enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

Replacing Template Features with Plain JavaScript

Type: (tag: string) => boolean. Default: undefined. configuring custom elements. merge static and dynamic class / style attributes / onXXX handlers. Whether to enable object slots (mentioned below the document) syntax".

It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size.

JSX

And v-slots is still available even if enableObjectSlots is turned off. Default: createVNode. Replace the function used when compiling JSX expressions. functional component.

Basics

with a dynamic binding:. Note: You should pass the second param as string for using arg.

Will compile to:. Note: You should pass a Two-dimensional Arrays to v-models.

Usage

Will compile to:. custom directive. Note: In jsx, v-slot should be replace with v-slots. This repo is only compatible with:. To add Vue JSX support. Install the plugin with:. Then add the plugin to your babel config:. transform on: { click: xx } to onClick: xxx. enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

Type: (tag: string) => boolean. Default: undefined. configuring custom elements. merge static and dynamic class / style attributes / onXXX handlers. Whether to enable object slots (mentioned below the document) syntax".

  1. It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size.

  2. And v-slots is still available even if enableObjectSlots is turned off.

Compatibility

  • Default: createVNode. Replace the function used when compiling JSX expressions.
  • functional component. with a dynamic binding:.

@vue/babel-preset-jsx

  • Note: You should pass the second param as string for using arg.
  • Will compile to:.
  • Note: You should pass a Two-dimensional Arrays to v-models.
  • Will compile to:. Recommended when using string arguments.
  • Note: In jsx, v-slot should be replace with v-slots.
  • This repo is only compatible with:.
  • To add Vue JSX support.
  • Install the plugin with:.
  • Then add the plugin to your babel config:.
  • transform on: { click: xx } to onClick: xxx.
  • enable optimization or not.
  • It's not recommended to enable it If you are not familiar with Vue 3.
  • Type: (tag: string) => boolean.
  • Default: undefined.
  • configuring custom elements.
  • merge static and dynamic class / style attributes / onXXX handlers.
  • Whether to enable object slots (mentioned below the document) syntax".
  • It might be useful in JSX, but it will add a lot of _isSlot condition expressions which increase your bundle size.
  • And v-slots is still available even if enableObjectSlots is turned off.
  • Default: createVNode.
  • Replace the function used when compiling JSX expressions.
  • functional component.
  • with a dynamic binding:.