Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
@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
})
]
}
This plugin supports HMR of Vue JSX components. The detection requirements are:
defineComponent
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.
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
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.