Vue Babel Preset Jsx Injecth

Posted on  by admin


Babel plugin for Vue 2.0 JSX. Assumes you are using Babel with a module bundler e.g.

13 Versions

  • Webpack, because the spread merge helper is imported as a module to avoid duplication.

Current Tags

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