\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.6397974,{"description":2873,"labels":2874,"number":2878,"owner":2857,"repository":2858,"state":2859,"title":2879,"updated_at":2880,"url":2881,"score":2882},"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.",[2875],{"name":2876,"color":2877},"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.64713377,{"description":2884,"labels":2885,"number":2886,"owner":2857,"repository":2858,"state":2859,"title":2887,"updated_at":2888,"url":2889,"score":2890},"Running a Vite Vue app. Is there something I'm missing to get the `setup` method to be called when running under Vue2?\r\n\r\n```\r\nimport { defineComponent, onBeforeMount, onMounted } from 'vue-demi'\r\n\r\nexport default defineComponent({\r\n name: 'ComponentName',\r\n created() {\r\n console.log('created');\r\n },\r\n beforeMount() {\r\n console.log('V2 beforeMount!');\r\n },\r\n mounted() {\r\n console.log('V2 mounted!');\r\n },\r\n setup() {\r\n console.log('setup');\r\n\r\n onBeforeMount(() => {\r\n console.log('V3 beforeMount!');\r\n })\r\n\r\n onMounted(() => {\r\n console.log('V3 mounted!');\r\n })\r\n },\r\n render() {\r\n const slot =\r\n typeof this.$slots.default === 'function'\r\n ? this.$slots.default()\r\n : this.$slots.default;\r\n return slot && slot[0];\r\n }\r\n});\r\n```",[],157,"setup() fires in defineComponent for Vue3 but not for Vue2, render() fires for both","2022-05-06T02:19:11Z","https://github.com/vueuse/vue-demi/issues/157",0.65950084,{"description":2892,"labels":2893,"number":2894,"owner":2857,"repository":2858,"state":2859,"title":2895,"updated_at":2896,"url":2897,"score":2898},"I've been having a difficult time working out how to build a universal component library with SFCs that can be used by both Vue2 and Vue3 apps bundled together in a Yarn 3 workspaces monorepo. \r\n\r\nI have created a (failing) [proof of concept](https://github.com/phobetron/demi-components-poc) project. The library builds, and the Vue3 app renders it correctly. However, the Vue 2 app will not build, and gives the following error:\r\n\r\n```plain text\r\nfailed to load config from \u003Cpath to>demi-components-poc/packages/example-vue2/vite.config.ts\r\nerror when starting dev server:\r\nError:\r\n\r\nVue packages version mismatch:\r\n\r\n- vue@3.2.31 (\u003Cpath to>demi-components-poc/node_modules/vue/index.js)\r\n- vue-template-compiler@2.6.14 (\u003Cpath to>demi-components-poc/node_modules/vue-template-compiler/package.json)\r\n\r\nThis may cause things to work incorrectly. Make sure to use the same version for both.\r\nIf you are using vue-loader@>=10.0, simply update vue-template-compiler.\r\nIf you are using vue-loader@\u003C10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.\r\n\r\n at Object.\u003Canonymous> (\u003Cpath to>demi-components-poc/node_modules/vue-template-compiler/index.js:10:9)\r\n at Module._compile (node:internal/modules/cjs/loader:1101:14)\r\n at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)\r\n at Module.load (node:internal/modules/cjs/loader:981:32)\r\n at Function.Module._load (node:internal/modules/cjs/loader:822:12)\r\n at Module.require (node:internal/modules/cjs/loader:1005:19)\r\n at require (node:internal/modules/cjs/helpers:102:18)\r\n at Object.\u003Canonymous> (\u003Cpath to>demi-components-poc/node_modules/vite-plugin-vue2/dist/utils/descriptorCache.js:30:42)\r\n at Module._compile (node:internal/modules/cjs/loader:1101:14)\r\n at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)\r\n at Module.load (node:internal/modules/cjs/loader:981:32)\r\n at Function.Module._load (node:internal/modules/cjs/loader:822:12)\r\n at Module.require (node:internal/modules/cjs/loader:1005:19)\r\n at require (node:internal/modules/cjs/helpers:102:18)\r\n at Object.\u003Canonymous> (\u003Cpath to>demi-components-poc/node_modules/vite-plugin-vue2/dist/main.js:29:27)\r\n at Module._compile (node:internal/modules/cjs/loader:1101:14)\r\n```\r\n\r\nI've attempted various arrangements of `vue-demi-switch` calls, but this exact error occurs regardless, so I've left that out of the PoC.\r\n\r\nThe library, as well as both Vue apps, are built using Vite. Is there an incompatibility with `vue-demi` SFCs and Yarn workspaces, or maybe in how Vite loads Vue?",[],139,"Shared `vue-demi` SFC Library & Yarn 3 Workspace Compatibility Issues","2022-03-09T18:15:13Z","https://github.com/vueuse/vue-demi/issues/139",0.66197836,{"description":2900,"labels":2901,"number":2902,"owner":2857,"repository":2858,"state":2859,"title":2903,"updated_at":2904,"url":2905,"score":2906},"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.6661105,{"description":2908,"labels":2909,"number":2910,"owner":2857,"repository":2858,"state":2859,"title":2911,"updated_at":2912,"url":2913,"score":2914},"【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.6693545,{"description":2916,"labels":2917,"number":2918,"owner":2857,"repository":2858,"state":2919,"title":2920,"updated_at":2921,"url":2922,"score":2923},"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,"closed","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.64508647,{"description":2925,"labels":2926,"number":2927,"owner":2857,"repository":2858,"state":2919,"title":2928,"updated_at":2929,"url":2930,"score":2931},"## 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.6601755,{"description":2933,"labels":2934,"number":2935,"owner":2857,"repository":2858,"state":2919,"title":2936,"updated_at":2937,"url":2938,"score":2939},"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.6642727,["Reactive",2941],{},["Set"],["ShallowReactive",2944],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQSDNa7B2oHl3bWnLbsz_YT44ptEfUAjkYQxXA5pK5KM":-1},"/vueuse/vue-demi/145"]