Skip to content

Commit

Permalink
docs: plugin-vue-jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Jan 4, 2021
1 parent 908277c commit 8d2dde3
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 5 deletions.
6 changes: 5 additions & 1 deletion docs/plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
> Submit a PR to add yours.
50 changes: 46 additions & 4 deletions packages/plugin-vue-jsx/README.md
Original file line number Diff line number Diff line change
@@ -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(...)
```

0 comments on commit 8d2dde3

Please sign in to comment.