- Notifications
You must be signed in to change notification settings - Fork149
vuejs/babel-plugin-jsx
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
To add Vue JSX support.
English |简体中文
Install the plugin with:
npm install @vue/babel-plugin-jsx -D
Then add the plugin to your babel config:
{"plugins": ["@vue/babel-plugin-jsx"]}Type:boolean
Default:false
transformon: { click: xx } toonClick: xxx
Type:boolean
Default:false
When enabled, this plugin generates optimized runtime code usingPatchFlags andSlotFlags 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.
Type:(tag: string) => boolean
Default:undefined
configuring custom elements
Type:boolean
Default:true
merge static and dynamic class / style attributes / onXXX handlers
Type:boolean
Default:true
Whether to enableobject 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. Andv-slots is still available even ifenableObjectSlots is turned off.
Type:string
Default:createVNode
Replace the function used when compiling JSX expressions.
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
constApp=()=><div>Vue 3.0</div>;
with render
constApp={render(){return<div>Vue 3.0</div>;},};
import{withModifiers,defineComponent}from'vue';constApp=defineComponent({setup(){constcount=ref(0);constinc=()=>{count.value++;};return()=>(<divonClick={withModifiers(inc,['self'])}>{count.value}</div>);},});
Fragment
constApp=()=>(<><span>I'm</span><span>Fragment</span></>);
constApp=()=><inputtype="email"/>;
with a dynamic binding:
constplaceholderText='email';constApp=()=><inputtype="email"placeholder={placeholderText}/>;
constApp={data(){return{visible:true};},render(){return<inputv-show={this.visible}/>;},};
Note: You should pass the second param as string for using
arg.
<inputv-model={val}/>
<inputv-model:argument={val}/>
<inputv-model={[val,['modifier']]}/>// Or<inputv-model_modifier={val}/>
<Av-model={[val,'argument',['modifier']]}/>// Or<inputv-model:argument_modifier={val}/>
Will compile to:
h(A,{argument:val,argumentModifiers:{modifier:true,},'onUpdate:argument':($event)=>(val=$event),});
Note: You should pass a Two-dimensional Arrays to v-models.
<Av-models={[[foo],[bar,'bar']]}/>
<Av-models={[[foo,'foo'],[bar,'bar'],]}/>
<Av-models={[[foo,['modifier']],[bar,'bar',['modifier']],]}/>
Will compile to:
h(A,{modelValue:foo,modelModifiers:{modifier:true,},'onUpdate:modelValue':($event)=>(foo=$event),bar:bar,barModifiers:{modifier:true,},'onUpdate:bar':($event)=>(bar=$event),});
Recommended when using string arguments
constApp={directives:{custom:customDirective},setup(){return()=><av-custom:arg={val}/>;},};
constApp={directives:{custom:customDirective},setup(){return()=><av-custom={[val,'arg',['a','b']]}/>;},};
Note: In
jsx,v-slotshould be replaced withv-slots
constA=(props,{ slots})=>(<><h1>{slots.default ?slots.default() :'foo'}</h1><h2>{slots.bar?.()}</h2></>);constApp={setup(){constslots={bar:()=><span>B</span>,};return()=>(<Av-slots={slots}><div>A</div></A>);},};// orconstApp={setup(){constslots={default:()=><div>A</div>,bar:()=><span>B</span>,};return()=><Av-slots={slots}/>;},};// or you can use object slots when `enableObjectSlots` is not false.constApp={setup(){return()=>(<><A>{{default:()=><div>A</div>,bar:()=><span>B</span>,}}</A><B>{()=>'foo'}</B></>);},};
tsconfig.json:
{"compilerOptions": {"jsx":"preserve" }} Ant Design Vue |  Vant |  Element Plus |  Vue Json Pretty |
This repo is only compatible with:
- Babel 7+
- Vue 3+
About
JSX for Vue 3
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.