monorepo for Babel / Vue JSX related packages
Branch: dev
Clone or download
nickmessing Merge pull request #45 from visualfanatic/patch-1
chore: fix typo in ``
Latest commit 5a2f280 Feb 18, 2019

Babel Preset JSX

Configurable Babel preset to add Vue JSX support. See the configuration options here.


Install the preset with:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

Then add the preset to .babelrc:

  "presets": ["@vue/babel-preset-jsx"]



render() {
  return <p>hello</p>

with dynamic content:

render() {
  return <p>hello { this.message }</p>

when self-closing:

render() {
  return <input />

with a component:

import MyComponent from './my-component'

export default {
  render() {
    return <MyComponent>hello</MyComponent>


render() {
  return <input type="email" />

with a dynamic binding:

render() {
  return <input

with the spread operator (object needs to be compatible with Vue Data Object):

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'

  return <input {...{ attrs: inputAttrs }} />


<input vModel="newTodoText" />

with a modifier:

<input vModel_trim="newTodoText" />

with an argument:

<input vOn:click="newTodoText" />

with an argument and modifiers:

<input vOn:click_stop_prevent="newTodoText" />

Functional Components

Transpiles arrow functions that return JSX into functional components, when they are either default exports:

export default ({ props }) => <p>hello { props.message }</p>

or PascalCase variable declarations:

const HelloWorld = ({ props }) => <p>hello { props.message }</p>


This repo is only compatible with: