# Babel Plugin JSX for Vue 3.0
[](https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx)
To add Vue JSX support.
English | [简体中文](./README-zh_CN.md)
## Installation
Install the plugin with:
```
npm install @ant-design-vue/babel-plugin-jsx -D
npm install @ant-design-vue/babel-helper-vue-transform-on
```
Then add the plugin to .babelrc:
```
{
"plugins": ["@ant-design-vue/babel-plugin-jsx"]
}
```
## Usage
### options
* transformOn
transform `on: { click: xx }` to `onClick: xxx`
* compatibleProps
compatible with Vue 2.x
`{ props, on = {}, attrs, ...rest }` will be transformed to `{ ...props, ...attrs, ...transformOn(on), ...rest }`
## Syntax
### Content
functional component
```jsx
const App = () =>
```
with render
```jsx
const App = {
render() {
return Vue 3.0
}
}
```
```jsx
const App = defineComponent(() => {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
{count.value}
)
})
```
Fragment
```jsx
const App = () => (
<>
I'm
Fragment
)
```
### Attributes/Props
```jsx
const App = () =>
```
with a dynamic binding:
```jsx
const placeholderText = 'email'
const App = () => (
)
```
### Directives
> It is recommended to use camelCase version of it (`vModel`) in JSX, but you can use kebab-case too (`v-model`).
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return ;
},
};
```
v-model
* You should use underscore (`_`) instead of dot (`.`) for modifiers (`vModel_trim={this.test}`)
```jsx
export default {
data: () => ({
test: 'Hello World',
}),
render() {
return (
<>
{this.test}
)
},
}
```
custom directive
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
);
},
}
```
### Slot
```jsx
const App = {
setup() {
const slots = {
a: () => A
,
b: () => B
}
return () =>
}
}
```
## Who is using
## Compatibility
This repo is only compatible with:
- **Babel 7+**
- **Vue 3+**
