Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@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.
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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.