{"id":24460899,"url":"https://github.com/unplugin/unplugin-vue-jsx-vapor","last_synced_at":"2025-02-28T21:09:52.982Z","repository":{"id":216939937,"uuid":"742784640","full_name":"unplugin/unplugin-vue-jsx-vapor","owner":"unplugin","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-09T01:27:12.000Z","size":761,"stargazers_count":40,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-16T21:38:00.447Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unplugin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["zhiyuanzmj"]}},"created_at":"2024-01-13T11:08:07.000Z","updated_at":"2024-11-22T15:20:15.000Z","dependencies_parsed_at":"2024-01-13T19:40:52.950Z","dependency_job_id":"4ef018e6-7990-412f-837b-6c87eef1c823","html_url":"https://github.com/unplugin/unplugin-vue-jsx-vapor","commit_stats":null,"previous_names":["zhiyuanzmj/unplugin-vue-jsx-vapor","unplugin/unplugin-vue-jsx-vapor"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-jsx-vapor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-jsx-vapor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-jsx-vapor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-jsx-vapor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unplugin","download_url":"https://codeload.github.com/unplugin/unplugin-vue-jsx-vapor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241148865,"owners_count":19918038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-21T04:15:54.594Z","updated_at":"2025-02-28T21:09:52.977Z","avatar_url":"https://github.com/unplugin.png","language":"TypeScript","readme":"# unplugin-vue-jsx-vapor\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-vue-jsx-vapor?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-vue-jsx-vapor)\n\nVue JSX Vapor.\n\n[REPL](https://repl.zmjs.dev/vue-jsx-vapor)\n\n## Install\n\n```bash\nnpm i unplugin-vue-jsx-vapor\n```\n\n\u003e [!CAUTION]\n\u003e ❌ The destructuring of props in a functional component will cause loss of reactivity.\n\n```tsx\nfunction Comp({ foo }) {\n  return \u003cdiv\u003e{foo}\u003c/div\u003e\n}\n\nexport default () =\u003e {\n  const foo = ref('foo')\n  return \u003cComp foo={foo.value} /\u003e\n}\n```\n\n#### Two Solutions\n\n1. ✅ Pass a ref variable as prop:\n\n```tsx\nfunction Comp({ foo }) {\n  return \u003cdiv\u003e{foo.value}\u003c/div\u003e\n}\n\nexport default () =\u003e {\n  const foo = ref('foo')\n  return \u003cComp foo={foo} /\u003e\n}\n```\n\n2. ✅ Use the `defineComponent` macro from [@vue-macros/jsx-macros](https://github.com/vue-macros/vue-macros/pull/794) to wrapping.\n\n```tsx\nconst Comp = defineComponent(({ foo }) =\u003e {\n  return \u003c\u003e{foo}\u003c/\u003e\n})\n// Will be convert to:\nconst Comp = defineComponent((_props) =\u003e {\n  return \u003c\u003e{_props.foo}\u003c/\u003e\n}, { props: ['foo'] })\n\nexport default () =\u003e {\n  const foo = ref('foo')\n  return \u003cComp foo={foo.value} /\u003e\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'\n\nexport default defineConfig({\n  plugins: [VueJsxVapor()],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'\n\nexport default {\n  plugins: [VueJsxVapor()],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [require('unplugin-vue-jsx-vapor/webpack')()],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: ['unplugin-vue-jsx-vapor/nuxt'],\n})\n```\n\n\u003e This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [require('unplugin-vue-jsx-vapor/webpack')()],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'\n\nbuild({\n  plugins: [VueJsxVapor()],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n","funding_links":["https://github.com/sponsors/zhiyuanzmj"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-vue-jsx-vapor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funplugin%2Funplugin-vue-jsx-vapor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-vue-jsx-vapor/lists"}