\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.6936845,{"description":2893,"labels":2894,"number":2895,"owner":2853,"repository":2854,"state":2896,"title":2897,"updated_at":2898,"url":2899,"score":2900},"Vue2 components is compiled.",[],33,"closed","Is it Supported in vue3 project use Vue2 components?","2021-07-15T17:17:22Z","https://github.com/vueuse/vue-demi/issues/33",0.6653637,{"description":2902,"labels":2903,"number":2904,"owner":2853,"repository":2854,"state":2896,"title":2905,"updated_at":2906,"url":2907,"score":2908},"Hello @antfu ,\r\n\r\nI am currently working on a SPA using `vue2` + `options-api` . This SPA imports another component library (`vue2` + `@vue/composition-api`), which simply exposes a single vue component. The component library also uses `@vueuse/core` using `vue-demi`.\r\n\r\nHere's an example of the exported component of the library (can not share everything since it's an company internal project)\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cp>FOO: {{ blub }}\u003C/p> \u003C!-- will stay false -->\r\n \u003Cbutton @click.stop=\"click\">CLICK ME\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { defineComponent, ref } from \"@vue/composition-api\"\r\nimport { useLocalStorage } from \"@vueuse/core\"\r\n\r\nexport default defineComponent({\r\n setup: (props) => {\r\n const foo = ref(false)\r\n\r\n const storageLocale = useLocalStorage(\"some_key\", \"en-GB\", {\r\n listenToStorageChanges: true,\r\n window,\r\n })\r\n\r\n return {\r\n foo,\r\n click: () => {\r\n console.log(\"before click\", foo.value)\r\n foo.value = true\r\n console.log(\"after click\", foo.value) // \u003C-- will be true\r\n },\r\n }\r\n },\r\n})\r\n\u003C/script>\r\n```\r\n\r\nSo basically everything works pretty good. But as soon as I add the `useLocalStorage` or any other composable from `@vueuse/core`, the template will not re-render as soon as the button was clicked. The ref value itself works, only the template does not update. I did a lot of debugging together with my colleague, and we figured out that the template will update, as soon as we get rid of all `vue-demi` based code.\r\n\r\nDependencies of the SPA:\r\n```json\r\n\"dependencies\": {\r\n \"vue\": \"^2.6.10\",\r\n \"@company/components\": \"1.0.0\",\r\n \"@vue/composition-api\": \"1.0.0-beta.25\"\r\n},\r\n\"devDependencies\": {\r\n ... all other\r\n}\r\n``` \r\nDependencies of the ComponentLibrary: \r\n```json\r\n\"dependencies\": {\r\n \"@vueuse/core\": \"4.0.10\"\r\n},\r\n\"devDependencies\": {\r\n \"vue\": \"^2.6.10\",\r\n \"@vue/composition-api\": \"1.0.0-beta.25\"\r\n ... all other\r\n}\r\n```\r\n\r\nDo you know what could be the issue here?\r\n\r\nKind regards,\r\nLukas",[],35,"vue-demi breaks composition-api template re-rendering (vue2)","2021-02-06T14:34:10Z","https://github.com/vueuse/vue-demi/issues/35",0.66882,{"description":2910,"labels":2911,"number":2912,"owner":2853,"repository":2854,"state":2896,"title":2913,"updated_at":2914,"url":2915,"score":2916},"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.6725826,{"description":2918,"labels":2919,"number":2920,"owner":2853,"repository":2854,"state":2896,"title":2921,"updated_at":2922,"url":2923,"score":2924},"I've started to build a library for vue and wanted to make it compatible with vue2 and vue3, so I decided to use VueDemi.\r\n\r\nThe library I'm building is [vue-insta-stories](https://github.com/UnevenSoftware/vue-insta-stories) a component library, I've struggled a little bit to make it compatible with both vue 2 & 3, first I've tried to use \u003Ctemplate> but didn't manage to get it working. I was using rollup to build it. \r\n\r\nSo I checked some examples on the vue-demi repo and discovered that everybody was using render and h to build templates, I switched to render function and everything seems to work nice, except that the first guy using it, was using vue2 and had some errors, after some checking I found out that the h function as different behaviours if used in vue2 and vue3 (I've never used render functions before :D)\r\n\r\nTo fix the issue I made a wrapper to the h function ([h-demi.ts](https://github.com/UnevenSoftware/vue-insta-stories/blob/main/packages/lib/src/utils/h-demi.ts)) basically the function has the same interface as vue2 createElement, and if you are using vue3 it adapts the arguments to the h function.\r\n\r\nThe version of h-demi.ts that I've written is pretty simple, it covers only what I used in vue-insta-stories, and is missing a lot of typings.\r\n\r\nI was wondering if a more robust version of h-demi would be a \"nice to have\" feature inside vue-demi or vue/composition-api. That would help a lot of people that want to build a library and make it compatible with both 2 & 3 versions of vue.\r\n\r\nThat was my first approach to a library, I may also got the whole building process wrong, but I didn't found examples or really good guides, so i mixed up what I've found (if there is an another way of fix the render issues please tell me \u003C3)",[],65,"h-demi - `h` function for Vue 2 and 3","2021-07-15T17:18:20Z","https://github.com/vueuse/vue-demi/issues/65",0.67301863,{"description":2926,"labels":2927,"number":2928,"owner":2853,"repository":2854,"state":2896,"title":2929,"updated_at":2930,"url":2931,"score":2932},"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.67835957,["Reactive",2934],{},["Set"],["ShallowReactive",2937],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjdCK-IpJ9n6X1xD1DIHaQRiExgba67BqKyxYo7kdIXo":-1},"/vueuse/vue-demi/153"]