@vue/babel-plugin-jsx
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Babel Plugin JSX for Vue 3.0

    CircleCI npm package issues-helper

    To add Vue JSX support.

    English | 简体中文

    Installation

    Install the plugin with:

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

    Then add the plugin to your babel config:

    {
      "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:argument={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 (Not recommended since v1.1.0)

    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

    Recommended when using string arguments

    const App = {
      directives: { custom: customDirective },
      setup() {
        return () => <a v-custom:arg={val} />;
      },
    };
    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+

    Keywords

    none

    Install

    npm i @vue/babel-plugin-jsx

    DownloadsWeekly Downloads

    596,625

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    96.8 kB

    Total Files

    27

    Last publish

    Collaborators

    • amour1688