Skip to content

Commit adaf9a5

Browse files
committed
docs: plugin-vue-jsx
1 parent e8cb77c commit adaf9a5

File tree

1 file changed

+46
-4
lines changed

1 file changed

+46
-4
lines changed

packages/plugin-vue-jsx/README.md

+46-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,56 @@
11
# @vitejs/plugin-vue-jsx
22

3-
Provides optimized Vue 3 JSX support via [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next).
3+
Provides Vue 3 JSX & TSX support with HMR.
44

55
```js
66
// vite.config.js
77
import vueJsx from '@vitejs/plugin-vue-jsx'
88

99
export default {
10-
plugins: [vueJsx({
11-
// options are passed on to @vue/babel-plugin-jsx
12-
})]
10+
plugins: [
11+
vueJsx({
12+
// options are passed on to @vue/babel-plugin-jsx
13+
})
14+
]
1315
}
1416
```
17+
18+
## Options
19+
20+
See [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next).
21+
## HMR Detection
22+
23+
This plugin supports HMR of Vue JSX components. The detection requirements are:
24+
25+
- The component must be exported.
26+
- The component must be declared by calling `defineComponent` via a root-level statement, either variable declaration or export declaration.
27+
28+
### Supported patterns
29+
30+
```jsx
31+
import { defineComponent } from 'vue'
32+
33+
// named exports w/ variable declaration: ok
34+
export const Foo = defineComponent(...)
35+
36+
// named exports referencing vairable declaration: ok
37+
const Bar = defineComponent(...)
38+
export { Bar }
39+
40+
// default export call: ok
41+
export default defineComponent(...)
42+
43+
// default export referencing variable declaration: ok
44+
const Baz = defineComponent(...)
45+
export default Baz
46+
```
47+
48+
### Non-supported patterns
49+
50+
```jsx
51+
// not using `defineComponent` call
52+
export const Bar = { ... }
53+
54+
// not exported
55+
const Foo = defineComponent(...)
56+
```

0 commit comments

Comments
 (0)