# Babel Plugin JSX for Vue 3.0
[](https://circleci.com/gh/vuejs/vue-next) [](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
To add Vue JSX support.
English | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)
## Installation
Install the plugin with:
```bash
npm install @vue/babel-plugin-jsx -D
```
Then add the plugin to .babelrc:
```js
{
"plugins": ["@vue/babel-plugin-jsx"]
}
```
## Usage
### options
#### transformOn
Type: `boolean`
Default: `false`
transform `on: { click: xx }` to `onClick: xxx`
#### optimize
Type: `boolean`
Default: `false`
enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.
#### isCustomElement
Type: `(tag: string) => boolean`
Default: `undefined`
configuring custom elements
#### mergeProps
Type: `boolean`
Default: `true`
merge static and dynamic class / style attributes / onXXX handlers
## Syntax
### Content
functional component
```jsx
const App = () => Vue 3.0
;
```
with render
```jsx
const App = {
render() {
return Vue 3.0
;
}
};
```
```jsx
import { withModifiers, defineComponent } from 'vue';
const App = defineComponent({
setup() {
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
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return ;
},
};
```
v-model
> Note: You should pass the second param as string for using `arg`.
```jsx
```
```jsx
```
```jsx
```
Will compile to:
```js
h(A, {
'argument': val,
"argumentModifiers": {
"modifier": true
},
"onUpdate:argument": $event => val = $event
})
```
custom directive
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => (
);
},
};
```
### Slot
> Note: In `jsx`, *`v-slot`* should be replace with **`v-slots`**
```jsx
const App = {
setup() {
const slots = {
foo: () => B
};
return () => (
A
);
}
};
// or
const App = {
setup() {
const slots = {
default: () => A
,
foo: () => B
};
return () => ;
}
};
```
### In TypeScript
`tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "preserve"
}
}
```
## Who is using
## Compatibility
This repo is only compatible with:
- **Babel 7+**
- **Vue 3+**
