\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.6218912,{"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.68950474,{"description":2873,"labels":2874,"number":2875,"owner":2857,"repository":2858,"state":2859,"title":2876,"updated_at":2877,"url":2878,"score":2879},"【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.69661593,{"description":2881,"labels":2882,"number":2883,"owner":2857,"repository":2858,"state":2859,"title":2884,"updated_at":2885,"url":2886,"score":2887},"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.7178905,{"description":2889,"labels":2890,"number":2891,"owner":2857,"repository":2858,"state":2892,"title":2893,"updated_at":2894,"url":2895,"score":2896},"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,"closed","Not running on Vue 2 App","2022-09-04T15:48:05Z","https://github.com/vueuse/vue-demi/issues/145",0.6781693,{"description":2898,"labels":2899,"number":2900,"owner":2857,"repository":2858,"state":2892,"title":2901,"updated_at":2902,"url":2903,"score":2904},"I am using vue-cli-service to compile my library which uses vue-demi and I develop the code using vue 3.2.X.\r\nWhen I import the library in a vue2 project `vue-demi` detects vue3 is running instead of vue2.\r\n\r\nThis is a console log of following in my library, which I imported in my application.\r\n```js\r\nimport * as VueDemi from 'vue-demi';\r\nconsole.log(VueDemi)\r\n```\r\n\r\n\r\n\r\n\r\nHere's a repo to reproduce it \r\n[https://github.com/pareshchouhan/vue-demi-test](https://github.com/pareshchouhan/vue-demi-test) \r\n\r\nIn my library only thing I use vue-demi is for importing defineComponent\r\n\r\n```js\r\nimport { defineComponent } from 'vue-demi';\r\n````\r\n\r\nIt crashes inside the library code when calling `defineComponent`\r\n\r\n",[],121,"Library uses vue-demi with vue3, app uses vue2 but still vue-demi detects vue3","2021-12-02T15:13:46Z","https://github.com/vueuse/vue-demi/issues/121",0.69325393,{"description":2906,"labels":2907,"number":2908,"owner":2857,"repository":2858,"state":2892,"title":2909,"updated_at":2910,"url":2911,"score":2912},"I have encountered an error when compiling a library to `cjs` format and using it with Vue2.\r\nError:\r\n```js\r\nUncaught TypeError: _vue.use is not a function\r\n at install (index.cjs.js:8)\r\n at index.cjs.js:14\r\n at chunk-4I6LKIR4.js?v=1e7b36e0:6\r\n at match-sorter.esm.js:441\r\n at chunk-4I6LKIR4.js?v=1e7b36e0:6\r\n at index.js:12\r\n at chunk-4I6LKIR4.js?v=1e7b36e0:6\r\n at dep:vue-query_devtools:1\r\n```\r\n\r\n\r\nAs seen on the screenshot Vue2 provides default export, which is only used on compositionApi currently, but not with the Vue itself.\r\n\r\nI can fix said error by changing line 5\r\nfrom : `_vue = _vue || Vue`\r\nto: `_vue = _vue.default || _vue || Vue.default || Vue`\r\n\r\nReproduction steps:\r\n- clone vue-query repo: https://github.com/DamianOsipiuk/vue-query\r\n- `npm i`\r\n- `npm pack` (npm link does not work somehow, there is a different error when using it which is not connected)\r\n- `cd examples/basic-vue-2.x/`\r\n- `npm i`\r\n- extract result of `npm pack` to example node_modules\r\n- `npm run dev`\r\n\r\nAm I missing some configuration part, or is it a real issue?\r\nI can provide a PR if necessary with the mentioned fix.",[],62,"TypeError when trying to use vue-demi with vue2 and cjs","2021-05-05T23:37:21Z","https://github.com/vueuse/vue-demi/issues/62",0.6935314,{"description":2914,"labels":2915,"number":2916,"owner":2857,"repository":2858,"state":2892,"title":2917,"updated_at":2918,"url":2919,"score":2920},"My use case is to config `ignoredElements` only in Vue 2. Currently we may use:\r\n\r\n```ts\r\nimport { Vue, isVue2 } from 'vue-demi'\r\n\r\nif (isVue2) {\r\n Vue.config.ignoredElements.push(...)\r\n}\r\n```\r\n\r\nThe problem is that when this code is run with Vue 3, `Vue` contains all tree-shakable exports which is not ideal.\r\n\r\nSo shall we add a `Vue2` export from vue-demi so that we can use it like:\r\n\r\n```ts\r\nimport { Vue2 } from 'vue-demi'\r\n\r\nif (Vue2) {\r\n Vue2.config.ignoredElements.push(...)\r\n}\r\n```\r\n\r\nAnd in Vue 3 mode we just export `undefined` from `vue-demi` so it doesn't hurt the bundle size.",[],41,"[Discussion] Shall we add something like `Vue2` to vue-demi's export?","2021-02-27T09:01:00Z","https://github.com/vueuse/vue-demi/issues/41",0.6957963,{"description":2922,"labels":2923,"number":2924,"owner":2857,"repository":2858,"state":2892,"title":2925,"updated_at":2926,"url":2927,"score":2928},"I have installed vue-demi (https://github.com/vueuse/vue-demi#usage) and it works as expected.\r\nBut when I build with Vite it outputs the following message:\r\n```sh\r\nNo name was provided for external module 'vue-demi' in output.globals – guessing 'vueDemi'\r\n```\r\n\r\npackage.json versions\r\n\"vite\": \"^2.4.4\"\r\n\"vue-demi\": \"0.11.4\"\r\n\r\nvite.config.js\r\n```\r\nimport { defineConfig } from 'vite';\r\nimport path from 'path';\r\n\r\nimport { createVuePlugin } from 'vite-plugin-vue2';\r\nexport default defineConfig({\r\n define: {\r\n 'process.env': process.env\r\n },\r\n optimizeDeps: {\r\n exclude: ['@vueuse/core', 'vue-demi']\r\n },\r\n plugins: [createVuePlugin()],\r\n build: {\r\n sourcemap: 'inline',\r\n lib: {\r\n entry: path.resolve(__dirname, 'lib/index.ts'),\r\n name: 'xxx'\r\n },\r\n rollupOptions: {\r\n external: ['vue', 'vue-demi'],\r\n output: {\r\n globals: {\r\n vue: 'Vue'\r\n },\r\n exports: 'named'\r\n }\r\n }\r\n }\r\n});\r\n```\r\n\r\nAny idea how to fix this?\r\n\r\n\r\nGreetings,\r\n\r\nWouter\r\n\r\n",[],108,"Vite build - No name was provided for external module 'vue-demi' in output.globals – guessing 'vueDemi'","2021-10-12T07:23:57Z","https://github.com/vueuse/vue-demi/issues/108",0.6996072,{"description":2930,"labels":2931,"number":2932,"owner":2857,"repository":2858,"state":2892,"title":2933,"updated_at":2934,"url":2935,"score":2936},"Hi! \r\nim working on components lib and truing to make it vue2/3 compatible using this solution.\r\nBut i faced with issue with vue3 installation.. in vue2 env everything working fine!\r\n Here is my build webpack config: \r\n```\r\nimport merge from 'webpack-merge';\r\nimport { Configuration } from 'webpack';\r\nimport { CleanWebpackPlugin } from 'clean-webpack-plugin';\r\nimport common from './webpack.base.config';\r\nconst { watch } = require('minimist')(process.argv.slice(2));\r\n\r\nconst path = require('path');\r\n\r\n\r\nexport default merge\u003CConfiguration>(common, {\r\n entry: {\r\n main: './src/index.ts',\r\n },\r\n output: {\r\n filename: 'index.js',\r\n path: path.resolve(__dirname, 'dist'),\r\n library: {\r\n name: 'TestLib',\r\n type: 'umd',\r\n },\r\n },\r\n devtool: 'source-map',\r\n mode: watch ? 'development' : 'production',\r\n bail: watch ? false : true,\r\n plugins: [\r\n new CleanWebpackPlugin(),\r\n ],\r\n externals: {\r\n vue: 'vue',\r\n 'vue-demi': 'vue-demi',\r\n 'lodash': 'lodash',\r\n },\r\n});\r\n```\r\non client side im using default vue-cli-service serve^ without additional settings\r\nbut in vue3 environment i got:\r\n\r\n\r\nseems problem somewhere near webpack build config, maybe somebody can share some webpack config examples? \r\nThanks! \r\n\r\n",[],81,"Any webpack example? ","2021-07-28T11:23:14Z","https://github.com/vueuse/vue-demi/issues/81",0.70259833,["Reactive",2938],{},["Set"],["ShallowReactive",2941],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCpSheXn3rkUUraeNNLU85DQ2lUkD7UmI89BxTjpmkVY":-1},"/vueuse/vue-demi/117"]