Babel plugin for Vue 3 JSX
npm install @vue/babel-plugin-jsx
To add Vue JSX support.
English | 简体中文
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"]
}
#### transformOn
Type: boolean
Default: false
transform on: { click: xx } to onClick: xxx
#### optimize
Type: boolean
Default: false
When enabled, this plugin generates optimized runtime code using PatchFlags and SlotFlags to improve rendering performance. However, due to JSX's dynamic nature, the optimizations are not as comprehensive as those in Vue's official template compiler.
Since the optimized code may skip certain re-renders to improve performance, we strongly recommend thorough testing of your application after enabling this option to ensure everything works as expected.
#### 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.
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 () => (
Fragment
jsx
const App = () => (
<>
I'm
Fragment
);
`$3
jsx
const App = () => ;
`with a dynamic binding:
jsx
const placeholderText = 'email';
const App = () => ;
`$3
#### v-show
jsx
const App = {
data() {
return { visible: true };
},
render() {
return ;
},
};
`#### v-model
> Note: You should pass the second param as string for using
.`jsx
`jsx
`jsx
// Or
`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.
jsx
`jsx
[foo, 'foo'],
[bar, 'bar'],
]}
/>
`jsx
[foo, ['modifier']],
[bar, 'bar', ['modifier']],
]}
/>
`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 () => ;
},
};
`$3
> Note: In
, _v-slot_ should be replaced with v-slotsjsx
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'}
);
},
};
`$3
:`json
{
"compilerOptions": {
"jsx": "preserve"
}
}
``This repo is only compatible with:
- Babel 7+
- Vue 3+