babel-plugin-jsx-vue-functional

JSX Functional Components for Vue JSX

This babel plugin adds some syntactic sugar to JSX.

Usage:

npm i babel-plugin-jsx-vue-functional -D

or

yarn add babel-plugin-jsx-vue-functional -D

Then add jsx-vue-functional to your .babelrc file under plugins

example .babelrc:

{
  "presets": ["es2015"],
  "plugins": ["jsx-vue-functional", "transform-vue-jsx"]
}

Example:

const A = () => <h1>Hello World</h1>
export const B = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}<A /></div>

will be transpiled into:

const A = {
  functional: true,
  render: (h) => <h1>Hello World</h1>
}
 
export const B = {
  functional: true,
  render: (h, { props, listeners }) => <div onClick={listeners.click}>{props.msg}<A /></div>
}

Warning

This plugin will transform all named arrow functions that contain JSX and starting with version 2.0.0 so this code will not work:

const A = () => <h1>Hello World</h1>
export const B = ({ props, listeners }) => <div onClick={listeners.click}>{props.msg}{A()}</div>