https://github.com/nickmessing/babel-plugin-jsx-vue-functional

JSX Syntactic Sugar Plugin for Vue Functional Components
https://github.com/nickmessing/babel-plugin-jsx-vue-functional

Last synced: 2 months ago
JSON representation

JSX Syntactic Sugar Plugin for Vue Functional Components

• Host: GitHub
• URL: https://github.com/nickmessing/babel-plugin-jsx-vue-functional
• Owner: nickmessing
• License: mit
• Created: 2017-05-02T08:17:56.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-12T06:20:45.000Z (almost 3 years ago)
• Last Synced: 2025-09-11T17:38:38.364Z (3 months ago)
• Language: JavaScript
• Size: 288 KB
• Stars: 65
• Watchers: 2
• Forks: 4
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - jsx-vue-functional - JSX Syntactic Sugar Plugin for Vue Functional Components (Utilities [🔝](#readme))
• awesome-vue-zh - JSX Vue函数 - 一种为Vue功能组件带来句法糖的巴别塔插件. (公用事业 / JSX)
• awesome-vue - jsx-vue-functional ★61 - A Babel plugin that brings syntactic sugar for Vue functional components. (Utilities / JSX)
• awesome-vue - jsx-vue-functional - A Babel plugin that brings syntactic sugar for Vue functional components. (Utilities / JSX)
• awesome-vue - jsx-vue-functional - A Babel plugin that brings syntactic sugar for Vue functional components. (Components & Libraries / Utilities)

README

          
[![Build Status](https://travis-ci.org/nickmessing/babel-plugin-jsx-vue-functional.svg?branch=master)](https://travis-ci.org/nickmessing/babel-plugin-jsx-vue-functional)

## DEPRECATED: Check https://github.com/vuejs/jsx instead

## JSX Functional Components for Vue JSX

This babel plugin adds some syntactic sugar to JSX.

### Usage:

```bash

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

```

or

```bash

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

```

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

example .babelrc:

```json

{

  "presets": ["es2015"],

  "plugins": ["jsx-vue-functional", "transform-vue-jsx"]

}

```

Example:

```js

const A = () => 
Hello World

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



```

will be transpiled into:

```js

const A = {

  functional: true,

  render: (h) => 
Hello World

}


export const B = {

  functional: true,

  render: (h, { props, listeners }) => 
{props.msg}



}

```


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

```js

const A = () => 
Hello World

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

```