https://github.com/unplugin/unplugin-vue-jsx-vapor
https://github.com/unplugin/unplugin-vue-jsx-vapor
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/unplugin/unplugin-vue-jsx-vapor
- Owner: unplugin
- License: mit
- Created: 2024-01-13T11:08:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-09T01:27:12.000Z (9 months ago)
- Last Synced: 2024-12-16T21:38:00.447Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 743 KB
- Stars: 40
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-vue-jsx-vapor
[](https://www.npmjs.com/package/unplugin-vue-jsx-vapor)
Vue JSX Vapor.
[REPL](https://repl.zmjs.dev/vue-jsx-vapor)
## Install
```bash
npm i unplugin-vue-jsx-vapor
```
> [!CAUTION]
> ❌ The destructuring of props in a functional component will cause loss of reactivity.
```tsx
function Comp({ foo }) {
return
{foo}
}
export default () => {
const foo = ref('foo')
return
}
```
#### Two Solutions
1. ✅ Pass a ref variable as prop:
```tsx
function Comp({ foo }) {
return
{foo.value}
}
export default () => {
const foo = ref('foo')
return
}
```
2. ✅ Use the `defineComponent` macro from [@vue-macros/jsx-macros](https://github.com/vue-macros/vue-macros/pull/794) to wrapping.
```tsx
const Comp = defineComponent(({ foo }) => {
return <>{foo}>
})
// Will be convert to:
const Comp = defineComponent((_props) => {
return <>{_props.foo}>
}, { props: ['foo'] })
export default () => {
const foo = ref('foo')
return
}
```
Vite
```ts
// vite.config.ts
import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
export default defineConfig({
plugins: [VueJsxVapor()],
})
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'
export default {
plugins: [VueJsxVapor()],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('unplugin-vue-jsx-vapor/webpack')()],
}
```
Nuxt
```ts
// nuxt.config.js
export default defineNuxtConfig({
modules: ['unplugin-vue-jsx-vapor/nuxt'],
})
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('unplugin-vue-jsx-vapor/webpack')()],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'
build({
plugins: [VueJsxVapor()],
})
```