@vitejs/plugin-vue-jsx

What is @vitejs/plugin-vue-jsx?

@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.

What are @vitejs/plugin-vue-jsx's main functionalities?

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;

Other packages similar to @vitejs/plugin-vue-jsx

babel-plugin-transform-vue-jsx

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

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.

README

@vitejs/plugin-vue-jsx

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
    }),
  ],
}

Options

include

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.

exclude

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.

HMR Detection

This plugin supports HMR of Vue JSX components. The detection requirements are:

• The component must be exported.
• The component must be declared by calling defineComponent via a root-level statement, either variable declaration or export declaration.

Supported patterns

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

Non-supported patterns

// not using `defineComponent` call
export const Bar = { ... }

// not exported
const Foo = defineComponent(...)