Socket
Socket
Sign inDemoInstall

@vue/babel-plugin-jsx

Package Overview
Dependencies
71
Maintainers
4
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vue/babel-plugin-jsx

Babel plugin for Vue 3 JSX


Version published
Maintainers
4
Weekly downloads
1,167,769
decreased by-4.26%

Weekly downloads

Readme

Source

Babel Plugin JSX for Vue 3

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.

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

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']]} />
// Or
<input v-model_modifier={val} />
<A v-model={[val, 'argument', ['modifier']]} />
// Or
<input v-model:argument_modifier={val} />

Will compile to:

h(A, {
  argument: val,
  argumentModifiers: {
    modifier: true,
  },
  'onUpdate:argument': ($event) => (val = $event),
});

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 replaced 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+

FAQs

Last updated on 19 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc