Babel Plugin JSX for Vue 3.0

To add Vue JSX support.

Installation

Install the plugin with:

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

Then 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-slot should be replace with v-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"
  }
}

Compatibility

This repo is only compatible with:

Babel 7+
Vue 3+

Download Details:

Author: vuejs

Demo: https://vue-next-jsx-explorer.netlify.app/

Source Code: https://github.com/vuejs/jsx-next

#vuejs #vue #javascript