Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/babel-plugin-jsx
JSX for Vue 3
https://github.com/vuejs/babel-plugin-jsx
jsx vuejs
Last synced: about 2 months ago
JSON representation
JSX for Vue 3
- Host: GitHub
- URL: https://github.com/vuejs/babel-plugin-jsx
- Owner: vuejs
- License: mit
- Created: 2020-05-08T08:58:49.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-13T17:44:42.000Z (5 months ago)
- Last Synced: 2024-04-14T07:18:14.333Z (5 months ago)
- Topics: jsx, vuejs
- Language: TypeScript
- Homepage: https://vue-jsx-explorer.netlify.app
- Size: 1.92 MB
- Stars: 1,681
- Watchers: 23
- Forks: 140
- Open Issues: 71
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Babel Plugin JSX for Vue 3
[](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
[](https://github.com/actions-cool/issues-helper)
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 your babel config:
```json
{
"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
#### enableObjectSlots
Type: `boolean`
Default: `true`
Whether to enable `object slots` (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of `_isSlot` condition expressions which increase your bundle size. And `v-slots` is still available even if `enableObjectSlots` is turned off.
#### pragma
Type: `string`
Default: `createVNode`
Replace the function used when compiling JSX expressions.
#### resolveType
Type: `boolean`
Default: `false`
(**Experimental**) Infer component metadata from types (e.g. `props`, `emits`, `name`). This is an experimental feature and may not work in all cases.
## 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
// Or
```
```
Will compile to:
```js
h(A, {
argument: val,
argumentModifiers: {
modifier: true,
},
'onUpdate:argument': ($event) => (val = $event),
});
```
#### v-models (Not recommended since v1.1.0)
> Note: You should pass a Two-dimensional Arrays to v-models.
Will compile to:
```js
h(A, {
modelValue: foo,
modelModifiers: {
modifier: true,
},
'onUpdate:modelValue': ($event) => (foo = $event),
bar: bar,
barModifiers: {
modifier: true,
},
'onUpdate:bar': ($event) => (bar = $event),
});
```
#### custom directive
Recommended when using string arguments
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => ;
},
};
```
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => ;
},
};
```
### Slot
> Note: In `jsx`, _`v-slot`_ should be replaced with **`v-slots`**
```jsx
const A = (props, { slots }) => (
<>
{slots.default ? slots.default() : 'foo'}
{slots.bar?.()}
>
);
const App = {
setup() {
const slots = {
bar: () => B,
};
return () => (
A
);
},
};
// or
const App = {
setup() {
const slots = {
default: () =>
A,
bar: () => B,
};
return () => ;
},
};
// or you can use object slots when `enableObjectSlots` is not false.
const App = {
setup() {
return () => (
<>
{{
default: () => A,
bar: () => B,
}}
{() => 'foo'}
>
);
},
};
```
### In TypeScript
`tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "preserve"
}
}
```
## Who is using
Ant Design Vue
Vant
Element Plus
Vue Json Pretty
## Compatibility
This repo is only compatible with:
- **Babel 7+**
- **Vue 3+**