\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,"closed","Not running on Vue 2 App","2022-09-04T15:48:05Z","https://github.com/vueuse/vue-demi/issues/145",0.6886351,{"description":3068,"labels":3069,"number":285,"owner":3019,"repository":3020,"state":3062,"title":3070,"updated_at":3071,"url":3072,"score":3073},"Hi, I was trying to use @vueuse/core when I ran into an issue with this package. I'm using npm 7.0.3, node 15.0.1 and my package.json looks like this:\r\n\r\n```\r\n{\r\n \"private\": true,\r\n \"scripts\": {\r\n \"development\": \"mix\",\r\n \"watch\": \"mix watch\",\r\n \"watch-poll\": \"mix watch -- --watch-options-poll=1000\",\r\n \"hot\": \"mix watch --hot\",\r\n \"production\": \"mix --production\"\r\n },\r\n \"devDependencies\": {\r\n \"@vue/compiler-sfc\": \"^3.0.2\",\r\n \"autoprefixer\": \"^10.0.1\",\r\n \"axios\": \"^0.19\",\r\n \"cross-env\": \"^7.0\",\r\n \"laravel-mix\": \"^6.0.0-beta.11\",\r\n \"lodash\": \"^4.17.19\",\r\n \"postcss-import\": \"^12.0.1\",\r\n \"postcss-nested\": \"^4.2.3\",\r\n \"postcss-simple-vars\": \"^5.0.2\",\r\n \"resolve-url-loader\": \"^3.1.0\",\r\n \"sass-resources-loader\": \"^2.1.1\",\r\n \"tailwindcss\": \"^1.9.6\",\r\n \"tailwindcss-filters\": \"^3.0.0\",\r\n \"vue\": \"^3.0.2\",\r\n \"vue-loader\": \"^16.0.0-beta.10\",\r\n \"vue-router\": \"^4.0.0-rc.1\",\r\n \"vuex\": \"^4.0.0-rc.1\",\r\n \"@vueuse/core\": \"^4.0.0-beta.38\"\r\n }\r\n}\r\n\r\n```\r\n\r\nI'm using Laravel Mix to compile all the assets (I'll be using Laravel as a backend). Everything was going fine until I tried to use any function from the vueuse package.\r\n\r\nThe console error looked like this:\r\n\r\n\r\n\r\nGoing thru the module code I see some lines are overwritten depending of the Vue version and it looks like the module thinks I'm on version 2 of Vue. Manually changing those lines to the 'v3' fixed the issue. I'm not sure this is Laravel Mix fault (webpack wrapper) or not. Let me know how can I help fixing this issue.",[],"NPM7: Incorrect detection of Vue version","2020-11-09T10:43:25Z","https://github.com/vueuse/vue-demi/issues/15",0.69543725,{"description":3075,"labels":3076,"number":3077,"owner":3019,"repository":3020,"state":3062,"title":3078,"updated_at":3079,"url":3080,"score":3081},"## Explanation\r\n\r\nHello there. I have a simple typescript package that uses `vue-demi`\r\n\r\n```ts\r\n// src/index.ts\r\nimport { ref } from 'vue-demi'\r\n\r\nexport function useTestPackage () {\r\n const hello = ref('Hello World')\r\n\r\n return {\r\n hello\r\n }\r\n}\r\n```\r\nAnd my `pacakge.json`\r\n```json\r\n{\r\n \"name\": \"test-ts-package\",\r\n \"version\": \"0.0.1\",\r\n \"main\": \"dist/cjs/index.js\",\r\n \"module\": \"dist/esm/index.js\",\r\n \"types\": \"dist/esm/index.d.ts\",\r\n \"description\": \"\",\r\n \"scripts\": {\r\n \"build\": \"npx rimraf dist && npm run build:esm && npm run build:cjs\",\r\n \"build:esm\": \"tsc --module es2015 --outDir dist/esm -d\",\r\n \"build:cjs\": \"tsc --module commonjs --outDir dist/cjs\",\r\n \"serve\": \"npm run build && npm pack\"\r\n },\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"dependencies\": {\r\n \"vue-demi\": \"latest\"\r\n },\r\n \"devDependencies\": {\r\n \"@vue/composition-api\": \"^1.0.0-rc.1\",\r\n \"typescript\": \"^4.4.2\",\r\n \"vue\": \"^3.0.0\"\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\n\r\nI run `npm run serve` to build the project and pack it on a `.tgz` file for local installation\r\n\r\n## Vue 3 Usage\r\nIn my Vue 3 App (Vite) I installed with local path `npm i ../test-ts-package/test-ts-package-0.0.1.tgz`\r\n\r\nAnd in my page I have this\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch6>\r\n {{ hello }}\r\n \u003Cbutton @click=\"handleClick\">click\u003C/button>\r\n \u003C/h6>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent } from 'vue'\r\n\r\n// i18nManager\r\nimport { useTestPackage } from 'test-ts-package'\r\n\r\nexport default defineComponent({\r\n name: 'PageIndex',\r\n setup () {\r\n const { hello } = useTestPackage()\r\n\r\n const handleClick = () => {\r\n console.log(hello.value)\r\n hello.value = 'lalal'\r\n console.log(hello.value)\r\n }\r\n\r\n return {\r\n hello,\r\n handleClick\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n```\r\nAnd everything works as expected, Prints `Hello World` and when I click the button it changes to `lalal`\r\n\r\n## Problem\r\nSame thing in a Vue 2 + Composition API (Quasar) App\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cq-page class=\"row items-center justify-evenly\">\r\n \u003Ch6 class=\"text-xl text-center text-gray-800\">\r\n {{ hello }}\r\n \u003Cbutton @click=\"handleClick\">click\u003C/button>\r\n \u003C/h6>\r\n \u003C/q-page>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent } from '@vue/composition-api'\r\n\r\n// i18nManager\r\nimport { useTestPackage } from 'test-ts-package'\r\n\r\nexport default defineComponent({\r\n name: 'PageIndex',\r\n setup () {\r\n const { hello } = useTestPackage()\r\n\r\n const handleClick = () => {\r\n console.log(hello.value)\r\n hello.value = 'lalal'\r\n console.log(hello.value)\r\n }\r\n\r\n return {\r\n hello,\r\n handleClick\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n```\r\n\r\nPrints `hello world` and on button click I get the correct value in the console but not in the DOM and also if I import my package then all the reactive values stop working properly!",[],102,"Reactivity issue with Vue 2 but not Vue 3","2022-01-12T08:53:55Z","https://github.com/vueuse/vue-demi/issues/102",0.6977376,{"description":3083,"labels":3084,"number":3085,"owner":3019,"repository":3019,"state":3062,"title":3086,"updated_at":3087,"url":3088,"score":3089},"我的项目依赖如下:\r\n`\r\n\"dependencies\": {\r\n \"@vue/composition-api\": \"^1.2.4\",\r\n \"@vueuse/core\": \"^5.0.3\",\r\n \"axios\": \"^0.21.1\",\r\n \"core-js\": \"^3.6.5\",\r\n \"dayjs\": \"^1.10.5\",\r\n \"element-ui\": \"^2.15.3\",\r\n \"optimize-css-assets-webpack-plugin\": \"^6.0.1\",\r\n \"progressive-image\": \"^1.2.0\",\r\n \"vue\": \"^2.6.11\",\r\n \"vue-fragment\": \"^1.5.2\",\r\n \"vue-quill-editor\": \"^3.0.6\",\r\n \"vue-router\": \"^3.2.0\",\r\n \"vuex\": \"^3.4.0\"\r\n }\r\n`\r\n页面中的响应式数据会失效,甚至异步请求回来的数据也不能正常显示在页面上,我的项目里用到了`useCssVar, useDebounce, useVModel`这三个方法,当然这三个方法也是都失效的,我查看了一下yarn.lock里依赖的版本,发现vue-demi的版本是0.11.4,然后当我把vue-demi的版本控制在0.10.0时,我的项目一切又恢复正常(useCssVar, useDebounce, useVModel都能正常使用,并且响应式数据正常)。\r\n\r\nvue-demi版本是0.11.4时页面是这样:\r\n\r\n\r\nvue-demi版本是0.10.0时页面是这样:\r\n\r\n\r\n希望作者大佬们帮我看一下这个issue\r\n",[],844,"@vueuse/core版本是5.0.3,它所依赖的vue-demi版本是0.11.4,引入vueuse/core里的方法后页面内的响应式数据都会失效","2021-10-19T06:38:36Z","https://github.com/vueuse/vueuse/issues/844",0.69775206,{"description":3091,"labels":3092,"number":3093,"owner":3019,"repository":3020,"state":3062,"title":3094,"updated_at":3095,"url":3096,"score":3097},"Hi there,\r\n\r\nI'm struggling to make a lib with @vue/cli and stuck because @vue/cli looks like a minor choice for vue-demi.\r\n\r\nvue.config.js:\r\n\r\n```vue.config.js\r\nmodule.exports = {\r\n configureWebpack: {\r\n externals: {\r\n 'vue-demi': 'vue-demi',\r\n },\r\n },\r\n};\r\n```\r\n\r\nuser outputs the error (vue 2.6.14):\r\n```\r\nTypeError: (0 , external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode) is not a function\r\n```\r\n\r\nIt does not seem that there is such a method createElementVNode in Vue2. Is this an issue only with @vue/cli?\r\n\r\nenv: vue-demi 0.12.1, vue 3.2.22, @vue/cli 5.0.0-rc.0",[],117,"createElementVNode is not a function with @vue/cli","2022-09-04T15:46:39Z","https://github.com/vueuse/vue-demi/issues/117",0.69850886,["Reactive",3099],{},["Set"],["ShallowReactive",3102],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPAeFli-veKFp-l2scyWysLLtB1ZUHF4WaYLSabvucbU":-1},"/vueuse/vue-demi/81"]