\r\nimport { defineConfig } from 'vite'\r\nimport vue from '@vitejs/plugin-vue'\r\nimport vueI18n from '@intlify/vite-plugin-vue-i18n'\r\n\r\n// https://vitejs.dev/config/\r\nconst path = require(\"path\")\r\nexport default defineConfig({\r\n test: {\r\n setupFiles: ['./tests/config.ts']\r\n },\r\n optimizeDeps: {\r\n exclude: ['vue-demi']\r\n },\r\n build: {\r\n lib: {\r\n entry: path.resolve(__dirname, 'src/install.ts'),\r\n name: 'vcp',\r\n formats: ['umd'],\r\n fileName: (format) => `vcp.${format}.ts`\r\n },\r\n rollupOptions: {\r\n external: ['vue', 'vueI18n', 'vue-demi',],\r\n output: {\r\n exports: 'named',\r\n globals: {\r\n 'vue-demi': 'VueDemi',\r\n 'vue': 'Vue',\r\n }\r\n }\r\n },\r\n },\r\n plugins: [\r\n vue({\r\n style: true,\r\n css: true\r\n }),\r\n vueI18n({\r\n include: path.resolve(__dirname, 'src/assets/translations.ts'),\r\n globalSFCScope: true,\r\n compositionOnly: false,\r\n }),\r\n ],\r\n server: {\r\n port: 8080\r\n },\r\n resolve: {\r\n dedupe: ['vue'],\r\n alias: {\r\n \"~\": path.resolve(__dirname, \"./src\"),\r\n \"@\": path.resolve(__dirname, \"./src\"),\r\n },\r\n },\r\n})\r\n\r\n```\r\n\r\npackage.json:\r\n```\r\n{\r\n \"name\": \"vcp\",\r\n \"version\": \"0.9.14\",\r\n \"private\": false,\r\n \"author\": \"Alireza Safari \u003Calireza.safaree@gmail.com> (http://alireza-safari.ir)\",\r\n \"license\": \"MIT\",\r\n \"main\": \"./dist/vcp.umd.ts\",\r\n \"description\": \"Vue Client Print with Template Builder\",\r\n \"exports\": {\r\n \".\": {\r\n \"require\": \"./dist/vcp.umd.ts\"\r\n },\r\n \"./dist/style.css\": \"./dist/style.css\"\r\n },\r\n \"keywords\": [\r\n \"vcp\",\r\n \"vue print\",\r\n \"vue client print\",\r\n \"template builder\",\r\n \"vue report\",\r\n \"vue report generator\"\r\n ],\r\n \"files\": [\r\n \"dist/*\"\r\n ],\r\n \"repository\": {\r\n \"type\": \"git\",\r\n \"url\": \"https://github.com/alireza0sfr/vue-client-print\"\r\n },\r\n \"scripts\": {\r\n \"dev\": \"vite\",\r\n \"build\": \"vite build\",\r\n \"serve\": \"vite preview\",\r\n \"test\": \"vitest run --environment jsdom\",\r\n \"test:ui:\": \"vitest --environment jsdom --ui\",\r\n \"test:coverage\": \"vitest run --coverage --environment jsdom\",\r\n \"test:watch\": \"vitest --environment jsdom\"\r\n },\r\n \"dependencies\": {\r\n \"dom-to-image\": \"^2.6.0\",\r\n \"file-saver\": \"^2.0.5\",\r\n \"jsdom\": \"^19.0.0\",\r\n \"print-js\": \"^1.6.0\",\r\n \"register-service-worker\": \"^1.7.2\",\r\n \"typescript\": \"^4.7.2\",\r\n \"vitest\": \"^0.12.9\",\r\n \"vue-demi\": \"^0.12.5\",\r\n \"vue-i18n\": \"^9.1.10\"\r\n },\r\n \"peerDependencies\": {\r\n \"vue\": \">=2.0.0 || >=3.0.0\"\r\n },\r\n \"devDependencies\": {\r\n \"@intlify/vite-plugin-vue-i18n\": \"^3.4.0\",\r\n \"@vitejs/plugin-vue\": \"^2.3.3\",\r\n \"@vitest/ui\": \"^0.12.9\",\r\n \"@vue/compiler-sfc\": \"^3.2.36\",\r\n \"@vue/test-utils\": \"^2.0.0-rc.18\",\r\n \"c8\": \"^7.11.3\",\r\n \"cz-conventional-changelog\": \"^3.0.1\",\r\n \"vite\": \"^2.9.9\",\r\n \"vue\": \"^3.2.36\"\r\n }\r\n}\r\n\r\n```",[],161,"vueuse","vue-demi","open","createElementVNode is not a function vite","2022-10-27T15:14:22Z","https://github.com/vueuse/vue-demi/issues/161",0.6757953,{"description":2865,"labels":2866,"number":2867,"owner":2857,"repository":2858,"state":2859,"title":2868,"updated_at":2869,"url":2870,"score":2871},"I have developed my library using Vue 2.7 and vue-demi with Vite. I am able to consume the library in Vue 2.7 and everything is working fine but not in Vue 3.\r\n\r\nAs soon as I use any of the components from my library, I get below errors in browser console and my components are not instantiated/mounted.\r\n\r\n\r\n\r\nIt seems Vue 3 does not work well with Vue 2. But then what is the point of using vue-demi?\r\n\r\nThe workaround that I have been trying is to publish two separate packages for each version with below scripts:\r\n\r\n```\r\n\"scripts\": {\r\n \"dev\": \"vite\",\r\n \"build:2\": \"vue-demi-switch 2 vue2 && run-p build-only build:styles\",\r\n \"build:3\": \"vue-demi-switch 3 && run-p build-only build:styles\",\r\n.......\r\n}\r\n```\r\n\r\nNow when I try to build for Vue 2, it throws below error:\r\n\r\n```\r\n[vite:vue2] source.startsWith is not a function\r\nfile: /Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/src/components/audio/AudioPlayer/AudioPlayer.vue\r\nerror during build:\r\nTypeError: source.startsWith is not a function\r\n at startsWith (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1420:17)\r\n at isEnd (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1457:11)\r\n at parseChildren (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:795:11)\r\n at Object.baseParse (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:769:5)\r\n at Object.parse (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2956:23)\r\n at Object.parse$2 [as parse] (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1198:24)\r\n at createDescriptor (file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vitejs/plugin-vue2/dist/index.mjs:68:27)\r\n at transformMain (file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vitejs/plugin-vue2/dist/index.mjs:755:34)\r\n at Object.transform (file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vitejs/plugin-vue2/dist/index.mjs:1104:16)\r\n at file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/rollup/dist/es/shared/node-entry.js:24656:40\r\n\r\n```\r\n\r\nPlease let me know what I should do.\r\n\r\n\r\n\r\n\r\n\r\n",[],237,"Can't use Vue 2 library in Vue 3","2023-07-27T00:50:29Z","https://github.com/vueuse/vue-demi/issues/237",0.71497935,{"description":2873,"labels":2874,"number":2878,"owner":2857,"repository":2858,"state":2859,"title":2879,"updated_at":2880,"url":2881,"score":2882},"I have a problem after migrating a project to `vue@2.7`.\r\n\r\nBefore the migration, this was the setup:\r\nlibrary: `vue-demi@0.13.6`\r\nproject1: `vue@2.6`\r\nproject2: `vue@3.1`\r\n\r\nEverything was working fine until we migrated project1 to `vue@2.7`. \r\nAfter the migration, we get this error whenever we import something from `vue-demi` in the `library`:\r\n\r\n```\r\n11:00:16 [vite] Error when evaluating SSR module /@fs/Users/facundo.allemand/projects/traveler-frontend/node_modules/.pnpm/@getyourguide+compass@1.5.26-beta.49_typescript@4.4.3+vue@2.7.8/node_modules/@getyourguide/compass/index.ts?v=e717953f:\r\nTypeError: __vite_ssr_import_0__.defineComponent is not a function\r\n at eval (/@fs/Users/facundo.allemand/projects/traveler-frontend/node_modules/.pnpm/@getyourguide+compass@1.5.26-beta.49_typescript@4.4.3+vue@2.7.8/node_modules/@getyourguide/compass/components/c-button/c-button.vue:33:41)\r\n at async instantiateModule (/Users/facundo.allemand/projects/traveler-frontend/node_modules/.pnpm/vite@2.8.4_sass@1.49.7/node_modules/vite/dist/node/chunks/dep-971d9e33.js:56177:9)\r\n```\r\n\r\nThis is the example content of the component producing the error:\r\n```html\r\n\u003Ctemplate>\r\n \u003Cbutton>TEST\u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent } from \"vue-demi\";\r\n\r\nexport default defineComponent({\r\n name: \"CButton\",\r\n});\r\n\u003C/script>\r\n```\r\n\r\nWe have the `exclude: [\"vue-demi\"],` from the vite config, and we followed all the setup instructions.",[2875],{"name":2876,"color":2877},"needs reproduction","fcd735",182,"After upgrade to 2.7: __vite_ssr_import_0__.defineComponent is not a function","2022-09-04T15:40:00Z","https://github.com/vueuse/vue-demi/issues/182",0.7153932,{"description":2884,"labels":2885,"number":2886,"owner":2857,"repository":2858,"state":2859,"title":2887,"updated_at":2888,"url":2889,"score":2890},"Running a Vite Vue app. Is there something I'm missing to get the `setup` method to be called when running under Vue2?\r\n\r\n```\r\nimport { defineComponent, onBeforeMount, onMounted } from 'vue-demi'\r\n\r\nexport default defineComponent({\r\n name: 'ComponentName',\r\n created() {\r\n console.log('created');\r\n },\r\n beforeMount() {\r\n console.log('V2 beforeMount!');\r\n },\r\n mounted() {\r\n console.log('V2 mounted!');\r\n },\r\n setup() {\r\n console.log('setup');\r\n\r\n onBeforeMount(() => {\r\n console.log('V3 beforeMount!');\r\n })\r\n\r\n onMounted(() => {\r\n console.log('V3 mounted!');\r\n })\r\n },\r\n render() {\r\n const slot =\r\n typeof this.$slots.default === 'function'\r\n ? this.$slots.default()\r\n : this.$slots.default;\r\n return slot && slot[0];\r\n }\r\n});\r\n```",[],157,"setup() fires in defineComponent for Vue3 but not for Vue2, render() fires for both","2022-05-06T02:19:11Z","https://github.com/vueuse/vue-demi/issues/157",0.7163617,{"description":2892,"labels":2893,"number":2894,"owner":2857,"repository":2858,"state":2859,"title":2895,"updated_at":2896,"url":2897,"score":2898},"【description】:\r\nI want to try create the same component for Vue2 & Vue3 in the same source code, so I find vue-demi. But.. I have seen some projects likes [json-editor-vue](https://github.com/cloydlau/json-editor-vue). For compact Vue2 & Vue3, I found its source code write `render` options for 2 & 3. But i think it's hard for developer to code.\r\n\r\n I prefer to code in `template` in a sfc file. So i have some idea(We can smooth the difference with `Vue2` & `Vue3` when we compile components). Can we write a component with `setup` & `composition-api` in a `sfc`. And then when we compile the component, we can use a series of plugins for `Vue2`: `unplugin-auto-import`, `unplugin-vue2-script-setup`, `vite-plugin-vue2`, `vue-template-compiler@2.6.x`, and plugins for `Vue3`: `@vitejs/plugin-vue`. \r\n\r\n@antfu Maybe u have thought some idea before create this repo. So can u give me some advice or info?",[],153,"it's hard for developer to write a common component with vue-demi ","2023-01-30T23:22:27Z","https://github.com/vueuse/vue-demi/issues/153",0.71744394,{"description":2900,"labels":2901,"number":2902,"owner":2857,"repository":2858,"state":2903,"title":2904,"updated_at":2905,"url":2906,"score":2907},"问题1: 一个vue3的组件在vue3环境下打包后的 在vue3的demo中使用组件样式未生效,getCurrentInstance获得的是null\r\n` import {\r\n defineComponent,\r\n ref,\r\n Vue2,\r\n isVue2,\r\n isVue3,\r\n getCurrentInstance,\r\n createVNode,\r\n render\r\n } from 'vue-demi';\r\n // import { createVNode, render } from 'vue'; // 若使用demo环境中的vue样式是生效的\r\n import Card from './card.vue';\r\n\r\n export default defineComponent({\r\n setup(props, context) {\r\n const btnFun = () => {\r\n cardShow();\r\n };\r\n\r\n const cardShow = () => {\r\n const node = document.getElementById('game-card');\r\n if (!node) {\r\n // 在vue2环境没有问题\r\n if (isVue2) {\r\n const gameCardComponent = Vue2.extend(Card);\r\n const gameCardInstance = new gameCardComponent({\r\n propsData: {\r\n btnObj: this\r\n }\r\n }).$mount();\r\n document.body.appendChild(gameCardInstance.$el);\r\n }\r\n if (isVue3) {\r\n const instance = getCurrentInstance();\r\n console.log(instance); // 打印为null\r\n const gameCardComponent = createVNode(Card, {\r\n btnObj: instance\r\n });\r\n render(gameCardComponent, document.querySelector('body'));\r\n }\r\n }\r\n };\r\n\r\n return {\r\n button_name,\r\n btnFun\r\n };\r\n }\r\n });`\r\n\r\n问题2: 一个vue3的组件在vue2环境下使用打包后的 在vue2的demo中\r\n\r\n",[],195,"closed","在'vue-demi'中可以导出createVNode, render, getCurrentInstance这些vue3的方法使用吗?","2022-08-26T12:48:02Z","https://github.com/vueuse/vue-demi/issues/195",0.46045524,{"description":2909,"labels":2910,"number":2911,"owner":2857,"repository":2858,"state":2903,"title":2912,"updated_at":2913,"url":2914,"score":2915},"I'm trying to set up a component library with vue-demi (Vite + Vue 3 + Setup Script). Importing thing work fine in Vue 3 apps, but fail for Vue 2. The resulting bundle looks like this:\r\n\r\nBaseButton.vue to be imported by Vue2/3 App\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref } from \"vue-demi\";\r\n\r\ndefineProps({\r\n label: {\r\n type: String,\r\n default: \"\",\r\n },\r\n});\r\n\r\nconst counter = ref(0);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Clabel>\r\n {{ label }}\r\n {{ counter }}\r\n \u003Cbutton v-bind=\"$attrs\" @click=\"counter++\">\r\n \u003Cslot />\r\n \u003C/button>\r\n \u003C/label>\r\n\u003C/template>\r\n```\r\n\r\nBuild output:\r\n```js\r\nimport { defineComponent, ref, openBlock, createElementBlock, createTextVNode, toDisplayString, createElementVNode, mergeProps, renderSlot } from \"vue\";\r\nconst _sfc_main = /* @__PURE__ */ defineComponent({\r\n props: {\r\n label: {\r\n type: String,\r\n default: \"\"\r\n }\r\n },\r\n setup(__props) {\r\n const counter = ref(0);\r\n return (_ctx, _cache) => {\r\n return openBlock(), createElementBlock(\"label\", null, [\r\n createTextVNode(toDisplayString(__props.label) + \" \" + toDisplayString(counter.value) + \" \", 1),\r\n createElementVNode(\"button\", mergeProps(_ctx.$attrs, {\r\n onClick: _cache[0] || (_cache[0] = ($event) => counter.value++)\r\n }), [\r\n renderSlot(_ctx.$slots, \"default\")\r\n ], 16)\r\n ]);\r\n };\r\n }\r\n});\r\nexport { _sfc_main as BaseButton };\r\n```\r\n\r\nIn Vue 2 I run into `Uncaught TypeError: Object(...) is not a function` error with `defineComponent()`. I suppose it should be importing from \"vue-demi\" instead of \"vue\"?\r\n\r\nPackage.json\r\n```json\r\n\"dependencies\": {\r\n \"vue-demi\": \"^0.12.4\"\r\n },\r\n \"devDependencies\": {\r\n \"@types/node\": \"^17.0.21\",\r\n \"@vitejs/plugin-vue\": \"^2.2.0\",\r\n \"@vue/composition-api\": \"^1.4.9\",\r\n \"typescript\": \"^4.5.4\",\r\n \"vite\": \"^2.8.0\",\r\n \"vue\": \"^3.2.25\",\r\n \"vue-tsc\": \"^0.29.8\"\r\n },\r\n \"peerDependencies\": {\r\n \"@vue/composition-api\": \"^1.0.0-rc.1\",\r\n \"vue\": \"^2.0.0 || >=3.0.0\"\r\n },\r\n \"peerDependenciesMeta\": {\r\n \"@vue/composition-api\": {\r\n \"optional\": true\r\n }\r\n },\r\n```\r\n\r\nvite.config.ts\r\n```ts\r\nexport default defineConfig({\r\n plugins: [vue()],\r\n build: {\r\n lib: {\r\n entry: path.resolve(__dirname, \"src/lib.ts\"),\r\n name: \"myLib\",\r\n fileName: (format) => `lib.${format}.js`,\r\n },\r\n rollupOptions: {\r\n // make sure to externalize deps that shouldn't be bundled\r\n // into your library\r\n external: [\"vue\"],\r\n output: {\r\n // Provide global variables to use in the UMD build\r\n // for externalized deps\r\n globals: {\r\n vue: \"Vue\",\r\n },\r\n },\r\n },\r\n },\r\n optimizeDeps: {\r\n exclude: [\"vue-demi\"],\r\n },\r\n});\r\n```",[],145,"Not running on Vue 2 App","2022-09-04T15:48:05Z","https://github.com/vueuse/vue-demi/issues/145",0.6739402,{"description":2917,"labels":2918,"number":2919,"owner":2857,"repository":2857,"state":2903,"title":2920,"updated_at":2921,"url":2922,"score":2923},"\r\n//父组件\r\n`\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CMyButton :foo='foo' v-model=\"foo\">\u003C/MyButton>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript>\r\nimport { ref } from \"@vue/reactivity\";\r\nimport MyButton from \"../components/MyButton\";\r\nexport default {\r\n components: {\r\n MyButton,\r\n },\r\n methods: {},\r\n computed: {},\r\n setup() {\r\n const foo = ref(\"1\");\r\n return { foo };\r\n },\r\n};\r\n\u003C/script>\r\n\r\n//子组件\r\n`\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cbutton @click=\"ceshi\">我是子组件\u003C/button>\r\n {{ foo }}\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { useVModel } from \"@vueuse/core\";\r\n\r\nexport default {\r\n props: {\r\n foo: String,\r\n },\r\n methods:{\r\n ceshi:function(){\r\n console.log(this);\r\n this.data = '我是测试' //修改无效 没有进行更新\r\n }\r\n },\r\n setup(props, { emit }) {\r\n const data = useVModel(props, \"foo\", emit);\r\n return { data};\r\n },\r\n};`\r\n`",[],554,"useVModel 无效","2021-06-03T09:33:50Z","https://github.com/vueuse/vueuse/issues/554",0.6935974,{"description":2925,"labels":2926,"number":2930,"owner":2857,"repository":2857,"state":2903,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Clear and concise description of the problem\n\n通过组合式api,向外部导出组件暴露的函数,避免调使用valueRef.value.test(), 这种方式,下面的示例已经实现,但是不清楚这个能否加入到vueuse的库中。\n\n### Suggested solution\n\n使用useRegisterComponent之前的写法\r\n```vue\r\n\u003Ctemplate>\r\n \u003CDemo ref=\"demo\"/>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\n import Demo from './Demo.vue'\r\n import { ref } from 'vue'\r\n\r\nconst demo = ref(null);\r\n// 像这样来调用组件的方法\r\ndemo.value.setTitle(\"new Title\");\r\n\u003C/script>\r\n```\r\n\r\n使用之后的写法\r\n\r\n| --- Demo\r\n| --- --- index.vue\r\n| --- --- composable.ts\r\n| --- --- types.ts\r\n| --- --- index.ts\r\n| --- App.vue\r\n\r\n **types.ts**\r\n```ts\r\nimport { ExtractPropTypes } from \"vue\"\r\nconst demoProps = {\r\n text: {\r\n type: String,\r\n default: \"hello world\"\r\n }\r\n}\r\n\r\nexport type DemoProps = ExtractPropTypes\u003Ctypeof demoProps>\r\n\r\nexport interface ExposeMethods {\r\n setTitle: (title: string) => void\r\n}\r\n\r\n```\r\n\r\n**composable.ts**\r\n```ts\r\nimport { useRegisterComponent } from 'vueuse/xxx'\r\nimport { DemoProps, ExposeMethods } from './types'\r\n\r\nconst { registerComponent, useComponent } = useRegisterComponent \u003CDemoProps, ExposeMethods >( ['setTitle'])\r\n\r\nexport {\r\n registerComponent, \r\n useComponent\r\n}\r\n\r\n```\r\n\r\n\r\n**index.vue**\r\n```vue\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent, ref } from 'vue';\r\nimport { registerComponent } from './composable'\r\nimport { demoProps } from './types'\r\n\r\nexport default defineComponent({\r\n name: 'Demo',\r\n props: demoProps,\r\n setup(props, ctx) {\r\n const title = ref('Hello World')\r\n // 这里会触发在onMount时触发一个register事件,向外部注册暴露的函数,\r\n // 内置getProps,setProps函数\r\n // getProps: () => ComputedRef\u003CDemoProps>\r\n // setProps: ( props: Partial\u003CDemoProps> ) => void \r\n const { getProps } = registerComponent(props, ctx, {\r\n setTitle: (text) => title.value = text\r\n })\r\n const _props = getProps()\r\n\r\n return {\r\n _props,\r\n title\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Ch1>{{title}}\u003C/h1>\r\n \u003Cdiv>{{_props}}\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n**index.ts**\r\n```ts\r\nimport Demo from './indexvue'\r\nexport * from './types'\r\nexport * from './composable'\r\n````\r\n\r\n**App.vue**\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport {Demo, useComponent} from './Demo'\r\nimport { ref, watch } from 'vue';\r\n\r\nconst a = ref('1')\r\n// [ registerComponent, ExposeMethods & { setProps, getProps } ]\r\nconst [registerComponent, { setProps, setTitle } ] = useComponent()\r\n\r\nsetProps({\r\n text:'open'\r\n}) // 调用修改值,动态修改组件内部属性\r\nwatch(() => a.value, () => { // 监听输入框值得变化修改组件属性\r\n setTitle(a.value)\r\n})\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CDemo @register=\"registerComponent\" text=\"111\"/>\r\n \u003Cinput v-model=\"a\"/>\r\n\u003C/template>\r\n```\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[2927],{"name":2928,"color":2929},"enhancement","a2eeef",1854,"useRegisterComponent","2022-09-21T16:38:19Z","https://github.com/vueuse/vueuse/issues/1854",0.6986253,{"description":2936,"labels":2937,"number":2938,"owner":2857,"repository":2858,"state":2903,"title":2939,"updated_at":2940,"url":2941,"score":2942},"Hi, sorry that I'm creating a following issue to #22 but I don't have the right to re-open and I'm still a little bit stuck.\r\n\r\n**Problem**\r\n\r\n`\"export 'defineComponent | computed |. etc' was not found in 'vue' ` \r\n\r\nSince my library exports components created using `defineComponent` it doesn't work in a project with `vue 2`\r\n\u003Cimg width=\"659\" alt=\"Screenshot 2020-12-28 at 12 03 11\" src=\"https://user-images.githubusercontent.com/4699008/103209997-b3ca2b80-4904-11eb-93de-b00897a7dd2d.png\">\r\n\r\n\r\n**Steps** \r\n\r\n1. I created a [PR](https://github.com/asigloo/vue-dynamic-forms/pull/211) to follow the process described in the `README.md` in my [library](https://github.com/asigloo/vue-dynamic-forms), changed `vue` imports to `vue-demi`, added the `peerDependencies`, and installed everything.\r\n2. Publish a new version [3.11.0](https://www.npmjs.com/package/@asigloo/vue-dynamic-forms/v/3.11.0)\r\n3. In this [branch](https://github.com/asigloo/vue-dynamic-forms/tree/feature/isomorph-installation) I installed the last version on the `vue 2 demo` app ---> [link](https://github.com/asigloo/vue-dynamic-forms/tree/feature/isomorph-installation/demos/vue-2) \r\n4. Run `npm run serve`\r\n\r\nIf I understand correctly it's necessary to publish the npm package for vue-demi to work when installing on a Vue 2 or 3 project, is not possible to test/debug locally without publishing it?. \r\n\r\nThanks in advance",[],25,"export 'defineComponent | computed | etc' was not found in 'vue'","2021-01-08T07:35:21Z","https://github.com/vueuse/vue-demi/issues/25",0.69975394,["Reactive",2944],{},["Set"],["ShallowReactive",2947],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fG8u87I8hocGb3G91pGR10i7QbGiJBnwbvfnD-Oj-9j0":-1},"/vueuse/vue-demi/194"]