Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.