Babel Plugin JSX for Vue 3

To add Vue JSX support.

English | 简体中文

Installation

Install the plugin with:

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

Then add the plugin to your babel config:

1{
2  "plugins": ["@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

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

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

with render

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

1import { withModifiers, defineComponent } from 'vue';
2
3const App = defineComponent({
4  setup() {
5    const count = ref(0);
6
7    const inc = () => {
8      count.value++;
9    };
10
11    return () => (
12      <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>
13    );
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 = () => <input type="email" placeholder={placeholderText} />;

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:argument={val} />

1<input v-model={[val, ['modifier']]} />
2// Or
3<input v-model_modifier={val} />

1<A v-model={[val, 'argument', ['modifier']]} />
2// Or
3<input v-model:argument_modifier={val} />

Will compile to:

1h(A, {
2  argument: val,
3  argumentModifiers: {
4    modifier: true,
5  },
6  'onUpdate:argument': ($event) => (val = $event),
7});

v-models (Not recommended since v1.1.0)

Note: You should pass a Two-dimensional Arrays to v-models.

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

1<A
2  v-models={[
3    [foo, 'foo'],
4    [bar, 'bar'],
5  ]}
6/>

1<A
2  v-models={[
3    [foo, ['modifier']],
4    [bar, 'bar', ['modifier']],
5  ]}
6/>

Will compile to:

1h(A, {
2  modelValue: foo,
3  modelModifiers: {
4    modifier: true,
5  },
6  'onUpdate:modelValue': ($event) => (foo = $event),
7  bar: bar,
8  barModifiers: {
9    modifier: true,
10  },
11  'onUpdate:bar': ($event) => (bar = $event),
12});

custom directive

Recommended when using string arguments

1const App = {
2  directives: { custom: customDirective },
3  setup() {
4    return () => <a v-custom:arg={val} />;
5  },
6};

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

Slot

Note: In jsx, v-slot should be replaced with v-slots

1const A = (props, { slots }) => (
2  <>
3    <h1>{slots.default ? slots.default() : 'foo'}</h1>
4    <h2>{slots.bar?.()}</h2>
5  </>
6);
7
8const App = {
9  setup() {
10    const slots = {
11      bar: () => <span>B</span>,
12    };
13    return () => (
14      <A v-slots={slots}>
15        <div>A</div>
16      </A>
17    );
18  },
19};
20
21// or
22
23const App = {
24  setup() {
25    const slots = {
26      default: () => <div>A</div>,
27      bar: () => <span>B</span>,
28    };
29    return () => <A v-slots={slots} />;
30  },
31};
32
33// or you can use object slots when `enableObjectSlots` is not false.
34const App = {
35  setup() {
36    return () => (
37      <>
38        <A>
39          {{
40            default: () => <div>A</div>,
41            bar: () => <span>B</span>,
42          }}
43        </A>
44        <B>{() => 'foo'}</B>
45      </>
46    );
47  },
48};

In TypeScript

tsconfig.json:

1{
2  "compilerOptions": {
3    "jsx": "preserve"
4  }
5}

Who is using

Ant Design Vue

Vant

Element Plus

Vue Json Pretty

Compatibility

This repo is only compatible with:

• Babel 7+
• Vue 3+