Vue JSX Vapor.
npm i vue-jsx-vaporCaution
❌ The destructuring of props in a functional component will cause loss of reactivity.
function Comp({ foo }) {
return <div>{foo}</div>
}
export default () => {
const foo = ref('foo')
return <Comp foo={foo.value} />
}- ✅ Pass a ref variable as prop:
function Comp({ foo }) {
return <div>{foo.value}</div>
}
export default () => {
const foo = ref('foo')
return <Comp foo={foo} />
}- ✅ Set the macros option to true, then use the
defineComponentmacro for wrapping.
Setup
// vite.config.ts
import vueJsxVapor from 'vue-jsx-vapor/vite'
export default defineConfig({
plugins: [
vueJsxVapor({
macros: true,
}),
]
})Usage
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 <Comp foo={foo.value} />
}Because of vue-jsx-vapor support all directives and most macros of Vue,
so we need the VSCode plugin ts-macro to use the vue-jsx-vapor/volar plugin for Typescript support.
It works similarly to @vue/language-tools but only used for ts or tsx files.
By default, after installing the ts-macro VSCode plugin, ts-macro will automatically load vue-jsx-vapor/volar by analyzing vite.config.ts and shared vueJsxVapor's options. so you don't need to config tsm.config.ts. But if you want, you can also configure it manually:
// tsm.config.ts
import vueJsxVapor from 'vue-jsx-vapor/volar'
export default {
plugins: [
vueJsxVapor({
macros: true,
}),
],
}Vite
// vite.config.ts
import VueJsxVapor from 'vue-jsx-vapor/vite'
export default defineConfig({
plugins: [VueJsxVapor()],
})Example: playground/
Rollup
// rollup.config.js
import VueJsxVapor from 'vue-jsx-vapor/rollup'
export default {
plugins: [VueJsxVapor()],
}Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [require('vue-jsx-vapor/webpack')()],
}Nuxt
// nuxt.config.js
export default defineNuxtConfig({
modules: ['vue-jsx-vapor/nuxt'],
})This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [require('vue-jsx-vapor/webpack')()],
},
}esbuild
// esbuild.config.js
import { build } from 'esbuild'
import VueJsxVapor from 'vue-jsx-vapor/esbuild'
build({
plugins: [VueJsxVapor()],
})