@vitejs/plugin-vue-jsx

Provides Vue 3 JSX & TSX support with HMR.

1// vite.config.js
2import vueJsx from '@vitejs/plugin-vue-jsx'
3
4export default {
5  plugins: [
6    vueJsx({
7      // options are passed on to @vue/babel-plugin-jsx
8    }),
9  ],
10}

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.

defineComponentName

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.

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 or the name specified in defineComponentName via a root-level statement, either variable declaration or export declaration.

Supported patterns

1import { defineComponent } from 'vue'
2
3// named exports w/ variable declaration: ok
4export const Foo = defineComponent({})
5
6// named exports referencing variable declaration: ok
7const Bar = defineComponent({ render() { return <div>Test</div> }})
8export { Bar }
9
10// default export call: ok
11export default defineComponent({ render() { return <div>Test</div> }})
12
13// default export referencing variable declaration: ok
14const Baz = defineComponent({ render() { return <div>Test</div> }})
15export default Baz

Non-supported patterns

1// not using `defineComponent` call
2export const Bar = { ... }
3
4// not exported
5const Foo = defineComponent(...)