![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@vue/babel-plugin-jsx
Advanced tools
Readme
To add Vue JSX support.
English | 简体中文
Install the plugin with:
npm install @vue/babel-plugin-jsx -D
Then add the plugin to your babel config:
{
"plugins": ["@vue/babel-plugin-jsx"]
}
Type: boolean
Default: false
transform on: { click: xx }
to onClick: xxx
Type: boolean
Default: false
enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.
Type: (tag: string) => boolean
Default: undefined
configuring custom elements
Type: boolean
Default: true
merge static and dynamic class / style attributes / onXXX handlers
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.
Type: string
Default: createVNode
Replace the function used when compiling JSX expressions.
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>
</>
);
const App = () => <input type="email" />;
with a dynamic binding:
const placeholderText = 'email';
const App = () => <input type="email" placeholder={placeholderText} />;
const App = {
data() {
return { visible: true };
},
render() {
return <input v-show={this.visible} />;
},
};
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),
});
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']]} />;
},
};
Note: In
jsx
,v-slot
should be replaced withv-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>
</>
);
},
};
tsconfig.json
:
{
"compilerOptions": {
"jsx": "preserve"
}
}
Ant Design Vue |
![]() Vant |
![]() Element Plus |
Vue Json Pretty |
This repo is only compatible with:
FAQs
Babel plugin for Vue 3 JSX
The npm package @vue/babel-plugin-jsx receives a total of 1,031,701 weekly downloads. As such, @vue/babel-plugin-jsx popularity was classified as popular.
We found that @vue/babel-plugin-jsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
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.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.