Skip to content
dev
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.

Babel Preset JSX

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

Compatibility

This repo is only compatible with:

Installation

Install the preset with:

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

Then add the preset to babel.config.js:

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

Syntax

Content

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>
  },
}

Attributes/Props

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

with a dynamic binding:

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

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 }} />
}

Slots

named slots:

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

scoped slots:

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }

  return <MyComponent scopedSlots={scopedSlots} />
}

Directives

<input vModel={this.newTodoText} />

with a modifier:

<input vModel_trim={this.newTodoText} />

with an argument:

<input vOn:click={this.newTodoText} />

with an argument and modifiers:

<input vOn:click_stop_prevent={this.newTodoText} />

v-html:

<p domPropsInnerHTML={html} />

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>