Caution
Vue 2 has reached EOL, and this project is no longer actively maintained.
Configurable Babel preset to add Vue JSX support. See the configuration options here .
This repo is only compatible with:
@vue/babel-plugin-jsx
.
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'],
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
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 }} />
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} />
<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} />
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>