\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.6275657,{"description":2905,"labels":2906,"number":2907,"owner":2853,"repository":2853,"state":2891,"title":2908,"updated_at":2909,"url":2910,"score":2911},"I've created a project with vite+vue2(using plugin)+vueuse and it looks like vueuse doesn't work properly in this setup.\r\n\r\nThe error I get:\r\n\r\n```\r\nvue.runtime.esm.js:619 [Vue warn]: Error in data(): \"ReferenceError: ref3 is not defined\"\r\n\r\nfound in\r\n\r\n---> \u003CAnonymous>\r\n \u003CRoot>\r\nwarn @ vue.runtime.esm.js:619\r\nvue.runtime.esm.js:1888 ReferenceError: ref3 is not defined\r\n at Object.ref (index.esm.js:1)\r\n at useCounter (index.esm.js:698)\r\n at setup (App.vue:21)\r\n at mergedSetupFn (vue-composition-api.esm.js:1741)\r\n at vue-composition-api.esm.js:1527\r\n at activateCurrentInstance (vue-composition-api.esm.js:1454)\r\n at initSetup (vue-composition-api.esm.js:1525)\r\n at VueComponent.wrappedData (vue-composition-api.esm.js:1509)\r\n at getData (vue.runtime.esm.js:4748)\r\n at initData (vue.runtime.esm.js:4705)\r\n```\r\n\r\nI tried `useCounter` and `useStorage`, but I think it can be replicated with other methods.\r\n\r\nHere is the project link to replicate: \r\nhttps://github.com/localhost5001/vite-vue2-vueuse-template",[],485,"Incompatible with vite and vue2","2021-05-05T20:52:10Z","https://github.com/vueuse/vueuse/issues/485",0.655533,{"description":2913,"labels":2914,"number":2915,"owner":2853,"repository":2853,"state":2891,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Describe the bug\r\n\r\nIt seems when in vue3 project, it still import vue-demi.\r\n\r\nWhen i down to 8.9.3, problem solved.\r\n\r\n```\r\n10:14:49 AM [vite] Internal server error: Failed to resolve import \"vue-demi\" from \"node_modules/.vite/deps/chunk-KBM4AKY4.js?v=49be3b31\". Does the file exist?\r\n Plugin: vite:import-analysis\r\n File: /Users/alex.xie/code/divzen-web/node_modules/.vite/deps/chunk-KBM4AKY4.js?v=49be3b31\r\n 1 | // node_modules/.pnpm/@vueuse+shared@8.9.4_vue@3.2.37/node_modules/@vueuse/shared/index.mjs\r\n 2 | import { shallowRef, watchEffect, readonly, ref, unref, isVue3, watch, customRef, effectScope, provide, inject, getCurrentScope, onScopeDispose, isRef, computed, reactive, toRefs as toRefs$1, toRef, isVue2, set as set$1, getCurrentInstance, onBeforeMount, nextTick, onBeforeUnmount, onMounted, onUnmounted, isReactive } from \"vue-demi\";\r\n | ^\r\n 3 | var __defProp$9 = Object.defineProperty;\r\n 4 | var __defProps$6 = Object.defineProperties;\r\n```\r\n\r\n### Reproduction\r\n\r\ni may put it later\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: macOS 12.4\r\n CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz\r\n Memory: 499.36 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node\r\n Yarn: 1.22.17 - ~/.yarn/bin/yarn\r\n npm: 8.5.5 - ~/.config/yarn/global/node_modules/.bin/npm\r\n Browsers:\r\n Chrome: 103.0.5060.114\r\n Firefox: 89.0\r\n Safari: 15.5\r\n npmPackages:\r\n @vueuse/core: 8.9.4 => 8.9.4 \r\n vue: ^3.2.37 => 3.2.37\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\npnpm\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://vueuse.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\r\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\r\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],1953,"v8.9.4 will break vue3 project?","2022-07-19T05:57:43Z","https://github.com/vueuse/vueuse/issues/1953",0.6640483,{"description":2921,"labels":2922,"number":2923,"owner":2853,"repository":2854,"state":2891,"title":2924,"updated_at":2925,"url":2926,"score":2927},"问题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",[],194,"在'vue-demi'中可以导出createVNode, render, getCurrentInstance这些vue3的方法使用吗?","2022-08-30T02:36:24Z","https://github.com/vueuse/vue-demi/issues/194",0.67053616,{"description":2921,"labels":2929,"number":2930,"owner":2853,"repository":2854,"state":2891,"title":2924,"updated_at":2931,"url":2932,"score":2927},[],195,"2022-08-26T12:48:02Z","https://github.com/vueuse/vue-demi/issues/195",["Reactive",2934],{},["Set"],["ShallowReactive",2937],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuyMLDR073si6YVxtSgVm0QO3HLQFcgauikCc40Pq0uY":-1},"/vueuse/vue-demi/161"]