@vue/babel-sugar-functional-vue

Syntactic sugar for functional components.

$3

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

$3

Install the dependencies:

``sh

`for yarn:`


yarn add @vue/babel-sugar-functional-vue
for npm:

npm install @vue/babel-sugar-functional-vue --save

In your .babelrc:

`json { "plugins": ["@vue/babel-sugar-functional-vue"] }`

However it is recommended to use the configurable preset instead.

`$3`

This plugin transpiles arrow functions that return JSX into functional components but only if it's an uppercase variable declaration or default export:

`js // Original: export const A = ({ props, listeners }) =>

{props.msg}


export const b = ({ props, listeners }) => {props.msg}

export default ({ props, listeners }) => {props.msg}
// Result:
export const A = {
  functional: true,
  render: (h, {
    props,
    listeners
  }) => 
{props.msg}

}
export const b = ({ props, listeners }) => {props.msg}

export default {
  functional: true,
  render: (h, {
    props,
    listeners
  }) => {props.msg}

}