Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Babel Plugin JSX for Vue 3.0
To add Vue JSX support.
English | 简体中文
Installation
Install the plugin with:
npm install @vue/babel-plugin-jsx -DThen add the plugin to .babelrc:
{
"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
const App = () => <div>Vue 3.0</div>;with render
const App = {
render() {
return <div>Vue 3.0</div>;
}
};import { withModifiers, defineComponent } from 'vue';
const App = defineComponent({
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={withModifiers(inc, ['self'])}>
{count.value}
</div>
);
}
})Fragment
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);Attributes / Props
const App = () => <input type="email" />;with a dynamic binding:
const placeholderText = 'email';
const App = () => (
<input
type="email"
placeholder={placeholderText}
/>
);Directives
v-show
const App = {
data() {
return { visible: true };
},
render() {
return <input v-show={this.visible} />;
},
};v-model
Note: You should pass the second param as string for using
arg.
<input v-model={val} /><input v-model={[val, ['modifier']]} /><A v-model={[val, 'argument', ['modifier']]} />Will compile to:
h(A, {
'argument': val,
"argumentModifiers": {
"modifier": true
},
"onUpdate:argument": $event => val = $event
})custom directive
const App = {
directives: { custom: customDirective },
setup() {
return () => (
<a
v-custom={[val, 'arg', ['a', 'b']]}
/>
);
},
};Slot
Note: In
jsx,v-slotshould be replace withv-slots
const App = {
setup() {
const slots = {
foo: () => <span>B</span>
};
return () => (
<A v-slots={slots}>
<div>A</div>
</A>
);
}
};
// or
const App = {
setup() {
const slots = {
default: () => <div>A</div>,
foo: () => <span>B</span>
};
return () => <A v-slots={slots} />;
}
};In TypeScript
tsconfig.json:
{
"compilerOptions": {
"jsx": "preserve"
}
}Who is using
Ant Design Vue |
Vant |
Element Plus |
Compatibility
This repo is only compatible with:
- Babel 7+
- Vue 3+
