\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,"createElementVNode is not a function vite","2022-10-27T15:14:22Z","https://github.com/vueuse/vue-demi/issues/161",0.7062457,{"description":3162,"labels":3163,"number":3164,"owner":3138,"repository":3139,"state":3140,"title":3165,"updated_at":3166,"url":3167,"score":3168},"First of all, I saw a couple of issues that involved more or less the same issue, but I tought it would be useful to group everything into one issue, so we could hopefully try to solve it.\r\n\r\n### Related issues:\r\n\r\n- #145 \r\n- #136 \r\n- #117 \r\n- #129 \r\n\r\n### Problem\r\n\r\nI'm currently building a private reusable package for a real-world application. This application runs on `nuxt2` (currently `nuxt-bridge`), and we're planning to migrate to `nuxt3` when all the packages we need are there. The idea was to build that reusable package in `vue3`, and use `vue-demi` to make it possible to be used in our `nuxt-bridge` app.\r\n\r\nAt first I just tried building the library and use it in a separate vue 3 app. With Vite it was really fast & easy to make it work 🎉\r\n\r\nHowever when I tried importing it in our `nuxt-bridge` app I came across several issues:\r\n\r\n1) When externalising `vue` dependency in vite, I got a list of warnings that some functions are not exported by vue. This is what the most issues are about.\r\n\r\n2) When I don't externalise `vue` in `vite.config.js`, I just get an empty component. In my repro I don't get any warning. I just see an anonymous component in my dev tools. In my production nuxt-app, I see the following error: `no template or render function is defined`. The component seemed to be imported correctly, it just doesn't render any HTML.\r\n\r\n3) I saw in other issues that the solution might be to externalise `vue-demi` as well, but that doesn't seem to make any difference for this.\r\n\r\n4) also tried using `npx vue-demi-fix` && `npx vue-demi-switch 2` commands, but these also doesn't seem to be changing a whole lot.\r\n\r\nI also saw that in #117 , [@koooge](https://github.com/koooge) researched into the issue a bit and saw that it might be due to a breaking change in @vue/core.\r\n\r\nThat's when I decided to build a repro with a vue2 app (@vue/cli), vue3 app (vite) and a simple component in a separate lib.\r\n\r\n### Repro\r\n\r\nhttps://github.com/jclaessens97/vue-demi-vue2-broken-repro\r\n\r\n\r\nI hope we can look into this issue and try to come up with a solution to be able to make vue3 components compatible for vue2, until everything is vue3 ready.\r\n",[],152,"Vue3 lib not working in Vue2 projects","2022-10-14T07:02:51Z","https://github.com/vueuse/vue-demi/issues/152",0.70778656,{"description":3170,"labels":3171,"number":3175,"owner":3138,"repository":3138,"state":3140,"title":3176,"updated_at":3177,"url":3178,"score":3179},"### Describe the bug\n\nType inference takes the function and its return as a prop type.\n\u003Cimg width=\"1075\" height=\"267\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/af0bee64-e50c-45f4-98f5-676d29268389\" />\n\n`defineProps` works fine\n\u003Cimg width=\"680\" height=\"215\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/d3f33a4a-72e3-4c0c-a94b-bf37ad05d356\" />\n\nPerhaps the issue lies here.\n\u003Cimg width=\"552\" height=\"290\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4a0d2211-92a1-4dab-9ab6-3c819ddefb4c\" />\n\n### Reproduction\n\nhttps://playground.vueuse.org/#eNqVkk1z0zAQhv/K4kviwR9lYDgEJxMoPcABOqE3zMG1N6laWRKSbNLJ+L+zlmyTMJBpLx5L++7us6v3ELxXKmkbDBZBZkrNlAWDtlHAC7Fb5oE1ebDKBauV1BYOUGosLG6wMcUtxxusFaczdLDVsobZmko1BtNSapy9O8ortC4eIxBNfYs6gm0jyimJcmL7qNDMcpGLUgpj4ftH3DIxNYigbzkdf8DyPyTzQy4AlJbKLMD9A3Bm7MITZB5gNQ8TZjb4s2Eaq8jLmKhwvxgQSVDhdh6/CoeoFJeclQ8Lh57NT8QhLFfQSlZRXSfv6NuFNP84jgMiaKpJU133J0/6JLZzZM/g6sIeKEv9O9Or0sEOe6MTQHa6dGhjw6UlFxwcZ+RBorEndM4b/XayF3EM/RsCai01xPEYqFgL67KXU50h0VOGlD2WylLSeYb0FMJh+jpDyQpr6ZX+LkuPhgiiwHsurguV3BspyNlu0/kQIENPzsiDyXv9bR7cWUvGSdOyEpRcIWetTgTaVKg6nbTrt8lFcpG+RFPngXtvWi51toZee8t2f/UtZa0YR/1VWUZuOOlfcC5/fXZ3Vjc4mI1y7rB8+Mf9vdl70muNBnWLeTDFbKF3aH346tsX3NP/FKxl1XBSnwlu0Eje9Ixe9qERFWEf6RztJ7dGJnY35mpvUZhxqB50dP+w28szo//BfZ28mbbY/QaxVIgQ\n\n### System Info\n\n```Shell\n\"@vueuse/core\": \"^13.2.0\"\n\"vue-types\": \"^5.1.3\"\n\"typescript\": \"^5.8.3\",\n```\n\n### Used Package Manager\n\npnpm\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](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\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.\n- [x] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[3172],{"name":3173,"color":3174},"pending triage","d73a4a",4929,"BUG | `createReusableTemplate` | Not compatible with the `vue-types` library","2025-07-31T02:11:46Z","https://github.com/vueuse/vueuse/issues/4929",0.7116876,{"description":3181,"labels":3182,"number":1587,"owner":3138,"repository":3183,"state":3140,"title":3184,"updated_at":3185,"url":3186,"score":3187},"I'm trying to integrate @vueuse/gesture into a vue3 project, as soon as I integrate useSpring and UseMorionProperties it throws an error: Module parse failed: Unexpected token (569:25)\r\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\r\n\r\n\r\n```\r\n\u003Ctemplate>\r\n \r\n \u003Cdiv class=\"area\">\r\n \u003Cdiv ref=\"demo\" id=\"card1\" \r\n v-drag=\"dragHandler\" \r\n v-pinch=\"pinchHandler\" \r\n v-hover=\"hoverHandler\">\r\n \u003C/div>\r\n \u003C/div>\r\n\r\n\u003C/template>\r\n\r\n\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { ref } from 'vue'; // onMounted,\r\nimport { useSpring, useMotionProperties } from '@vueuse/motion' \r\n\r\n\r\nexport default {\r\n \r\n setup(){\r\n\r\n // const demoElement = ref()\r\n const demo = ref()\r\n\r\n\r\n const { motionProperties } = useMotionProperties(demo, {\r\n cursor: 'grab',\r\n x: 0,\r\n y: 0,\r\n })\r\n\r\n const { set } = useSpring(motionProperties);\r\n\r\n const pinchHandler = ({ offset: [d, a], pinching }) => {\r\n console.log(\"pinch\", pinching, d, a);\r\n set({ zoom: d, rotateZ: a })\r\n }\r\n\r\n const hoverHandler = ({ hovering }) => {\r\n if (hovering) {\r\n set( { backgroundColor: '#7344be', scale: 1.5 } )\r\n } else {\r\n set( { backgroundColor: '#b164e7', scale: 1 } )\r\n }\r\n }\r\n\r\n const dragHandler = (dragState) => {\r\n console.log(\"drag\", dragState);\r\n }\r\n\r\n return {\r\n demo,\r\n dragHandler,\r\n pinchHandler,\r\n hoverHandler\r\n }\r\n }\r\n \r\n}\r\n\r\n\u003C/script>\r\n```\r\n\r\n\u003Cstyle>\r\n\r\n.area {\r\n position: absolute;\r\n left: 100px;\r\n top: 100px;\r\n width: 1720px;\r\n height: 840px;\r\n background-color: red;\r\n}\r\n\r\n#card1 {\r\n width: 400px;\r\n height: 400px;\r\n background-color: green;\r\n}\r\n\r\n\u003C/style>\r\n\r\n\r\n\r\nin ./node_modules/@vueuse/motion/dist/index.mjs\r\n\r\nModule parse failed: Unexpected token (569:25)\r\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\r\n| async function waitForComplete() {\r\n| await Promise.all(animations);\r\n> variant.transition?.onComplete?.();\r\n| }\r\n| return Promise.all([waitForComplete()]);\r\n\r\n @ ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./src/components/VueImagePinch.vue?vue&type=script&lang=ts 3:0-63 14:37-56 21:24-33\r\n @ ./src/components/VueImagePinch.vue?vue&type=script&lang=ts\r\n @ ./src/components/VueImagePinch.vue\r\n @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=js\r\n @ ./src/App.vue?vue&type=script&lang=js\r\n @ ./src/App.vue\r\n @ ./src/main.js\r\n @ multi (webpack)-dev-server/client?http://192.168.1.32:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js",[],"gesture","vueuse motion throws a loader error","2024-08-18T14:14:18Z","https://github.com/vueuse/gesture/issues/31",0.713202,{"description":3189,"labels":3190,"number":3191,"owner":3138,"repository":3139,"state":3192,"title":3193,"updated_at":3194,"url":3195,"score":3196},"This is my dependency library\r\n\r\nWhen I start Vite, the following error occurs\r\n\r\nIs vue3.5.13 version supported?",[],268,"closed","No matching export Error","2024-11-21T12:32:50Z","https://github.com/vueuse/vue-demi/issues/268",0.6513423,{"description":3198,"labels":3199,"number":3200,"owner":3138,"repository":3139,"state":3192,"title":3201,"updated_at":3202,"url":3203,"score":3204},"\r\n应该是template的原因,所以是是只能jsx或者render?",[],188,"vue3版本下开发的组件 无法在vue2环境使用","2022-08-26T10:41:30Z","https://github.com/vueuse/vue-demi/issues/188",0.6601476,{"description":3206,"labels":3207,"number":3208,"owner":3138,"repository":3138,"state":3192,"title":3209,"updated_at":3210,"url":3211,"score":3212},"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.6784675,{"description":3214,"labels":3215,"number":1510,"owner":3138,"repository":3139,"state":3192,"title":3216,"updated_at":3217,"url":3218,"score":3219},"Hi!\r\nI'm trying to use Vue3 component inside Vue2 tool, but I face such error:\r\n\r\n\r\n\r\n\r\n\r\nI have a Vue3 project and export only TestComponent from there. This is a simple component that prints only text and expects one string prop. I built the project and copied built file to Vue2 project (because it's too long to publish it) and I'm trying to import Vue3 component there.\r\n\r\n\r\n\r\nIn Vue3 project I use vue-demi and in Vue2 project I use composition api.\r\n\r\nDo you have any thoughts how to fix that error?",[],"Object(...) is not a function","2022-02-07T06:17:17Z","https://github.com/vueuse/vue-demi/issues/129",0.68099844,["Reactive",3221],{},["Set"],["ShallowReactive",3224],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwIRwlGAT1WWZYlyiXdzdlZqDuCplD7rtdoEC_qtMP8k":-1},"/vueuse/sound/27"]