diff --git a/docs/plugins/index.md b/docs/plugins/index.md index eca7e3d962bc95..4f44f359b5b4a4 100644 --- a/docs/plugins/index.md +++ b/docs/plugins/index.md @@ -6,10 +6,14 @@ - Provides Vue 3 Single File Components support. +### [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) + +- Provides Vue 3 JSX support (via [dedicated Babel transform](https://github.com/vuejs/jsx-next)). + ### [@vitejs/plugin-react-refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh) - Provides React Fast Refresh Support. ## Community Plugins -> Submit a PR to add yours. \ No newline at end of file +> Submit a PR to add yours. diff --git a/packages/plugin-vue-jsx/README.md b/packages/plugin-vue-jsx/README.md index fcac94738f18bf..cb05fb597095e5 100644 --- a/packages/plugin-vue-jsx/README.md +++ b/packages/plugin-vue-jsx/README.md @@ -1,14 +1,56 @@ # @vitejs/plugin-vue-jsx -Provides optimized Vue 3 JSX support via [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next). +Provides Vue 3 JSX & TSX support with HMR. ```js // vite.config.js import vueJsx from '@vitejs/plugin-vue-jsx' export default { - plugins: [vueJsx({ - // options are passed on to @vue/babel-plugin-jsx - })] + plugins: [ + vueJsx({ + // options are passed on to @vue/babel-plugin-jsx + }) + ] } ``` + +## Options + +See [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next). +## 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 + +```jsx +import { defineComponent } from 'vue' + +// named exports w/ variable declaration: ok +export const Foo = defineComponent(...) + +// named exports referencing vairable declaration: ok +const Bar = defineComponent(...) +export { Bar } + +// default export call: ok +export default defineComponent(...) + +// default export referencing variable declaration: ok +const Baz = defineComponent(...) +export default Baz +``` + +### Non-supported patterns + +```jsx +// not using `defineComponent` call +export const Bar = { ... } + +// not exported +const Foo = defineComponent(...) +``` \ No newline at end of file