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-propsThen 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
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 }} />
}<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" />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:
- Babel 7+. For Babel 6 support, use vuejs/babel-plugin-transform-vue-jsx
- Vue 2+. JSX is not supported for older versions.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent