@vue/babel-plugin-jsx

What is @vue/babel-plugin-jsx?

@vue/babel-plugin-jsx is a Babel plugin that allows you to use JSX syntax in Vue.js applications. It provides a way to write Vue components using JSX, which can be more familiar to developers coming from a React background. This plugin helps in writing more expressive and concise component code.

What are @vue/babel-plugin-jsx's main functionalities?

Basic JSX Syntax

This feature allows you to write Vue components using JSX syntax. The code sample demonstrates a simple Vue component that renders a div with the text 'Hello, JSX!'.

const MyComponent = { render() { return <div>Hello, JSX!</div> } }

Using Props

This feature allows you to use props in your JSX components. The code sample shows a Vue component that takes a 'message' prop and renders it inside a div.

const MyComponent = { props: ['message'], render() { return <div>{this.message}</div> } }

Event Handling

This feature allows you to handle events in your JSX components. The code sample demonstrates a button that shows an alert when clicked.

const MyComponent = { render() { return <button onClick={() => alert('Clicked!')}>Click Me</button> } }

Conditional Rendering

This feature allows you to perform conditional rendering in your JSX components. The code sample shows a component that renders 'Show' or 'Hide' based on the value of the 'show' data property.

const MyComponent = { data() { return { show: true } }, render() { return this.show ? <div>Show</div> : <div>Hide</div> } }

Loop Rendering

This feature allows you to render lists in your JSX components. The code sample demonstrates a component that renders a list of items using the map function.

const MyComponent = { data() { return { items: [1, 2, 3] } }, render() { return <ul>{this.items.map(item => <li>{item}</li>)}</ul> } }

Other packages similar to @vue/babel-plugin-jsx

babel-plugin-transform-vue-jsx

babel-plugin-transform-vue-jsx is another Babel plugin that enables JSX syntax in Vue.js applications. It is similar to @vue/babel-plugin-jsx but is an older implementation. It provides similar functionalities but may lack some of the optimizations and features present in @vue/babel-plugin-jsx.

vue-jsx

vue-jsx is a package that provides JSX support for Vue.js. It is similar to @vue/babel-plugin-jsx in that it allows you to write Vue components using JSX syntax. However, it may have different configuration options and performance characteristics.

README

Babel Plugin JSX for Vue 3.0

To add Vue JSX support.

English | 简体中文

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

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.

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),
});

v-models

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

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

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

<A
  v-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),
});

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 A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// or you can use object slots when `enableObjectSlots` is not false.
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => "foo"}</B>
      </>
    );
  },
};

In TypeScript

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Who is using

Ant Design Vue

Vant

Element Plus

Vue Json Pretty

Compatibility

This repo is only compatible with:

• Babel 7+
• Vue 3+

Changelog

1.1.0

2021-09-30

• 🌟 feat: allow string arguments on directives [#496]