Babel Plugin Transform Vue Jsx

Posted on  by admin

To add Vue JSX support.

Usage

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

14 Versions

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.

Compatibility

Default: createVNode. Replace the function used when compiling JSX expressions. functional component. with a dynamic binding:. Note: You should pass the second param as string for using arg. Will compile to:.

Who is using

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

latest (7 months ago) . Babel plugin for Vue 2.0 JSX.

Syntax

This repo is only compatible with Babel 7.x, for 6.x please use vuejs/babel-plugin-transform-vue-jsx. Assumes you are using Babel with a module bundler e.g. Webpack, because the spread merge helper is imported as a module to avoid duplication.

Installation

This is mutually exclusive with babel-plugin-transform-react-jsx. In your .babelrc:.

However it is recommended to use the configurable preset instead.

@vue/babel-plugin-transform-vue-jsx

The plugin transpiles the following JSX:. To the following JavaScript:. Note the h function, which is a shorthand for a Vue instance's $createElement method, must be in the scope where the JSX is. Since this method is passed to component render functions as the first argument, in most cases you'd do this:. First, Vue 2.0's vnode format is different from React's.

The second argument to the createElement call is a "data object" that accepts nested objects. Each nested object will be then processed by corresponding modules:.

  1. The equivalent of the above in Vue 2.0 JSX is:. If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component.

  2. If it starts with uppercase, it will be treated as an identifier, which allows you to do:.

Current Tags

  • JSX spread is supported, and this plugin will intelligently merge nested data properties.
  • The merged data will be:.

Component Tip

  • Vue directives are usable the same way as in template with a few key differences:.
  • You can use directives camelCased instead of kebab-cased (vMyDirective is treated as v-my-directive).
  • You have to use underscore sign instead of dots for modifiers because of JSXIdentifier limitation.
  • Only runtime directives work (only v-show and custom directives), compile-time directives are out of this project's scope.
  • A full example would be: .
  • Babel plugin for Vue 2.0 JSX.
  • If using Babel 7, use 4.x.
  • If using Babel 6, use 3.x.
  • Assumes you are using Babel with a module bundler e.g.
  • Webpack, because the spread merge helper is imported as a module to avoid duplication.
  • This is mutually exclusive with babel-plugin-transform-react-jsx.
  • In your .babelrc:.
  • The plugin transpiles the following JSX:.
  • To the following JavaScript:.
  • Note the h function, which is a shorthand for a Vue instance's $createElement method, must be in the scope where the JSX is.
  • Since this method is passed to component render functions as the first argument, in most cases you'd do this:.
  • Starting with version 3.4.0 we automatically inject const h = this.$createElement in any method and getter (not functions or arrow functions) declared in ES2015 syntax that has JSX so you can drop the (h) parameter.
  • First, Vue 2.0's vnode format is different from React's.
  • The second argument to the createElement call is a "data object" that accepts nested objects.
  • Each nested object will be then processed by corresponding modules:.
  • The equivalent of the above in Vue 2.0 JSX is:.
  • If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component.
  • If it starts with uppercase, it will be treated as an identifier, which allows you to do:.