Babel Plugin JSX for Vue 3.0

To add Vue JSX support.

English | 简体中文

Installation

Install the plugin with:

1npm install @ant-design-vue/babel-plugin-jsx -D

Then add the plugin to .babelrc:

1{
2  "plugins": ["@ant-design-vue/babel-plugin-jsx"]
3}

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

Syntax

Content

functional component

1const App = () => <div></div>;

with render

1const App = {
2  render() {
3    return <div>Vue 3.0</div>;
4  }
5};

1const App = defineComponent(() => {
2  const count = ref(0);
3
4  const inc = () => {
5    count.value++;
6  };
7
8  return () => (
9    <div onClick={inc}>
10      {count.value}
11    </div>
12  );
13});

1import { withModifiers } from 'vue';
2
3const App = () => {
4  const count = ref(0);
5
6  const inc = () => {
7    count.value++;
8  };
9
10  return () => (
11    <div onClick={withModifiers(inc, ['self'])}>
12      {count.value}
13    </div>
14  );
15}

Fragment

1const App = () => (
2  <>
3    <span>I'm</span>
4    <span>Fragment</span>
5  </>
6);

Attributes / Props

1const App = () => <input type="email" />;

with a dynamic binding:

1const placeholderText = 'email';
2const App = () => (
3  <input
4    type="email"
5    placeholder={placeholderText}
6  />
7);

Directives

v-show

1const App = {
2  data() {
3    return { visible: true };
4  },
5  render() {
6    return <input v-show={this.visible} />;
7  },
8};

v-model

Note: You should pass the second param as string for using arg.

1<input v-model={val} />

1<input v-model={[val, ['trim']]} />

1<A v-model={[val, 'foo', ['bar']]} />

Will compile to:

1h(A, {
2  'foo': val,
3  "fooModifiers": {
4    "bar": true
5  },
6  "onUpdate:foo": $event => val = $event
7})

custom directive

1const App = {
2  directives: { custom: customDirective },
3  setup() {
4    return () => (
5      <a
6        v-custom={[val, 'arg', ['a', 'b']]}
7      />
8    );
9  },
10};

Slot

1const App = {
2  setup() {
3    const slots = {
4      default: () => <div>A</div>,
5      foo: () => <span>B</span>
6    };
7    return () => <A v-slots={slots} />;
8  }
9};

Who is using

Ant Design Vue

Vant

Compatibility

This repo is only compatible with:

• Babel 7+
• Vue 3+