Package Exports

@vitejs/plugin-vue-jsx
@vitejs/plugin-vue-jsx/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vitejs/plugin-vue-jsx) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

See @vue/babel-plugin-jsx.

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(...)