Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@vitejs/plugin-vue-jsx
Advanced tools
@vitejs/plugin-vue-jsx is a Vite plugin that provides support for Vue 3 JSX syntax. It allows developers to write Vue components using JSX, which can be more familiar to those coming from a React background or those who prefer JSX syntax over Vue's template syntax.
Basic JSX Support
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!'.
import { defineComponent } from 'vue';
const MyComponent = defineComponent({
render() {
return <div>Hello, JSX!</div>;
}
});
export default MyComponent;
Props Handling
This feature allows you to define and use props in your JSX components. The code sample shows a component that takes a 'message' prop and renders it inside a div.
import { defineComponent } from 'vue';
const MyComponent = defineComponent({
props: {
message: String
},
render() {
return <div>{this.message}</div>;
}
});
export default MyComponent;
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.
import { defineComponent } from 'vue';
const MyComponent = defineComponent({
methods: {
handleClick() {
alert('Button clicked!');
}
},
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
});
export default MyComponent;
babel-plugin-transform-vue-jsx is a Babel plugin that transforms Vue JSX syntax into JavaScript. It is similar to @vitejs/plugin-vue-jsx in that it allows you to write Vue components using JSX, but it is used in a Babel-based build setup rather than a Vite-based one.
vue-jsx is a package that provides JSX support for Vue 3. It is similar to @vitejs/plugin-vue-jsx in that it allows you to write Vue components using JSX syntax, but it is a standalone package that can be used with various build tools.
Provides Vue 3 JSX & TSX support with HMR.
// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [
vueJsx({
// options are passed on to @vue/babel-plugin-jsx
}),
],
}
Type: (string | RegExp)[] | string | RegExp | null
Default: /\.[jt]sx$/
A picomatch pattern, or array of patterns, which specifies the files the plugin should operate on.
Type: (string | RegExp)[] | string | RegExp | null
Default: undefined
A picomatch pattern, or array of patterns, which specifies the files to be ignored by the plugin.
See @vue/babel-plugin-jsx for other options.
Type: string[]
Default: ['defineComponent']
The name of the function to be used for defining components. This is useful when you have a custom defineComponent
function.
This plugin supports HMR of Vue JSX components. The detection requirements are:
defineComponent
or the name specified in defineComponentName
via a root-level statement, either variable declaration or export declaration.import { defineComponent } from 'vue'
// named exports w/ variable declaration: ok
export const Foo = defineComponent({})
// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return <div>Test</div> }})
export { Bar }
// default export call: ok
export default defineComponent({ render() { return <div>Test</div> }})
// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return <div>Test</div> }})
export default Baz
// not using `defineComponent` call
export const Bar = { ... }
// not exported
const Foo = defineComponent(...)
FAQs
Provides Vue 3 JSX & TSX support with HMR.
The npm package @vitejs/plugin-vue-jsx receives a total of 523,122 weekly downloads. As such, @vitejs/plugin-vue-jsx popularity was classified as popular.
We found that @vitejs/plugin-vue-jsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.