\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.71551263,{"description":2869,"labels":2870,"number":2874,"owner":2853,"repository":2854,"state":2855,"title":2875,"updated_at":2876,"url":2877,"score":2878},"I have a problem after migrating a project to `vue@2.7`.\r\n\r\nBefore the migration, this was the setup:\r\nlibrary: `vue-demi@0.13.6`\r\nproject1: `vue@2.6`\r\nproject2: `vue@3.1`\r\n\r\nEverything was working fine until we migrated project1 to `vue@2.7`. \r\nAfter the migration, we get this error whenever we import something from `vue-demi` in the `library`:\r\n\r\n```\r\n11:00:16 [vite] Error when evaluating SSR module /@fs/Users/facundo.allemand/projects/traveler-frontend/node_modules/.pnpm/@getyourguide+compass@1.5.26-beta.49_typescript@4.4.3+vue@2.7.8/node_modules/@getyourguide/compass/index.ts?v=e717953f:\r\nTypeError: __vite_ssr_import_0__.defineComponent is not a function\r\n at eval (/@fs/Users/facundo.allemand/projects/traveler-frontend/node_modules/.pnpm/@getyourguide+compass@1.5.26-beta.49_typescript@4.4.3+vue@2.7.8/node_modules/@getyourguide/compass/components/c-button/c-button.vue:33:41)\r\n at async instantiateModule (/Users/facundo.allemand/projects/traveler-frontend/node_modules/.pnpm/vite@2.8.4_sass@1.49.7/node_modules/vite/dist/node/chunks/dep-971d9e33.js:56177:9)\r\n```\r\n\r\nThis is the example content of the component producing the error:\r\n```html\r\n\u003Ctemplate>\r\n \u003Cbutton>TEST\u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent } from \"vue-demi\";\r\n\r\nexport default defineComponent({\r\n name: \"CButton\",\r\n});\r\n\u003C/script>\r\n```\r\n\r\nWe have the `exclude: [\"vue-demi\"],` from the vite config, and we followed all the setup instructions.",[2871],{"name":2872,"color":2873},"needs reproduction","fcd735",182,"After upgrade to 2.7: __vite_ssr_import_0__.defineComponent is not a function","2022-09-04T15:40:00Z","https://github.com/vueuse/vue-demi/issues/182",0.71933705,{"description":2880,"labels":2881,"number":2882,"owner":2853,"repository":2854,"state":2855,"title":2883,"updated_at":2884,"url":2885,"score":2886},"【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.7197642,{"description":2888,"labels":2889,"number":2890,"owner":2853,"repository":2854,"state":2855,"title":2891,"updated_at":2892,"url":2893,"score":2894},"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.7342532,{"description":2896,"labels":2897,"number":2898,"owner":2853,"repository":2854,"state":2855,"title":2899,"updated_at":2900,"url":2901,"score":2902},"Hi folks! \r\n\r\nWe are using `vue-demi` in a monorepo where we have a _components package_ that uses `vue-demi` and has vue 3 as a `devDependency`. Alongside that, in the same monorepo, have vue 2 and vue 3 apps that consume the _components package_. We declare a dependency on the _components package_ in the various vue apps using the `workspace:` protocol. \r\n\r\nWe use `pnpm` as our package manager. Upon running `pnpm install` in the root of monorepo, vue 3 `devDependency` of the _components package_ is installed and the post install script of `vue-demi` sets up its exports for vue 3 since it finds the local vue 3 dependency when running `require('vue')`. In the apps, a link is created to the _components package_ which results in `vue-demi` being hard configured for vue 3 and fails to work when a component coming from the _components package_ is used in a vue 2 app.\r\n\r\nHow should one use `vue-demi` in a monorepo to have it work across vue 2 and vue 3 apps in the same monorepo?\r\n\r\nThanks for the work put into this package btw! It's a blessing!",[],138,"vue-demi setup in monorepos ","2023-05-27T11:50:31Z","https://github.com/vueuse/vue-demi/issues/138",0.73662317,{"description":2904,"labels":2905,"number":2906,"owner":2853,"repository":2854,"state":2907,"title":2908,"updated_at":2909,"url":2910,"score":2911},"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.6505415,{"description":2913,"labels":2914,"number":2915,"owner":2853,"repository":2854,"state":2907,"title":2916,"updated_at":2917,"url":2918,"score":2919},"问题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.70705426,{"description":2913,"labels":2921,"number":2922,"owner":2853,"repository":2854,"state":2907,"title":2916,"updated_at":2923,"url":2924,"score":2919},[],195,"2022-08-26T12:48:02Z","https://github.com/vueuse/vue-demi/issues/195",{"description":2926,"labels":2927,"number":2928,"owner":2853,"repository":2854,"state":2907,"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.7170558,["Reactive",2934],{},["Set"],["ShallowReactive",2937],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fKGPpvDRupffwgPQiEKscQloUYJ4Sx6rOBPgM4sPErAY":-1},"/vueuse/vue-demi/157"]