\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.6484196,{"description":2877,"labels":2878,"number":2879,"owner":2853,"repository":2854,"state":2855,"title":2880,"updated_at":2881,"url":2882,"score":2883},"Hello, I'm trying to create a Vite Library with Vue-Demi to work in Nuxt 2 and Nuxt 3.\r\n\r\nI guess I'm missing something. I've seen a lot of examples but I don't know what I'm doing wrong.\r\n\r\n[Here is the repo with the examples and errors.](https://github.com/priverop/vue-demi-vite-with-nuxt)\r\n\r\nAfter running `yarn install && yarn dev` in both the **lib-consumer** projects it works fine in Nuxt 2 but it doesn't work in Nuxt 3.\r\n\r\nnuxt.config.ts\r\n```typescript\r\nexport default defineNuxtConfig({\r\n build: {\r\n transpile: ['@prp-astara/vite-test-lib'],\r\n },\r\n})\r\n```\r\n\r\n```bash\r\n[Vue warn]: Property \"_self\" was accessed during render but is not defined on instance. 13:18:50\r\n[Vue warn]: Unhandled error during execution of render function 13:18:50\r\n at \u003CAnonymous>\r\n[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading '_c') 13:18:50\r\n at Proxy.$ (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@prp-astara/vite-test-lib/dist/vite-test-lib.umd.js:1:1163)\r\n at renderComponentRoot (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:906:44) 13:18:41\r\n at renderComponentSubTree (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:719:51)\r\n at renderComponentVNode (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:644:16)\r\n at Module.ssrRenderComponent (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:94:12)\r\n at _sfc_ssrRender (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/app.vue:23:31)\r\n at renderComponentSubTree (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:17)\r\n at renderComponentVNode (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:644:16)\r\n at Module.ssrRenderComponent (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:94:12)\r\n at default (/vue-demi-vite-with-nuxt/nuxt3-lib-consumer/node_modules/nuxt/dist/app/components/nuxt-root.vue:63:37)\r\n```\r\n\r\nThis is the exact issue I had when you try to get Vue 2 working in Nuxt 3.\r\n\r\nThank you",[],212,"Can't get it working with Vite in Nuxt 3","2023-02-08T16:29:10Z","https://github.com/vueuse/vue-demi/issues/212",0.6503479,{"description":2885,"labels":2886,"number":2890,"owner":2853,"repository":2854,"state":2855,"title":2891,"updated_at":2892,"url":2893,"score":2894},"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.",[2887],{"name":2888,"color":2889},"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.6691853,{"description":2896,"labels":2897,"number":2898,"owner":2853,"repository":2854,"state":2855,"title":2899,"updated_at":2900,"url":2901,"score":2902},"【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.6747137,{"description":2904,"labels":2905,"number":2906,"owner":2853,"repository":2854,"state":2855,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### First off \r\nThanks for all the amazing work! Super excited to be using Vue Demi. 🚀 \r\n\r\n----------------------------------\r\n\r\n### The Problem: \r\nThis is likely a user error, but I'm not able to find any examples of consuming a vue-demi plugin in a Nuxt 2 application to help point me in the right direction. \r\n\r\n**Here's what I have for my package.json in my vue-demi plugin:** \r\n```json\r\n \"peerDependencies\": {\r\n \"@vue/composition-api\": \"^1.4.5\",\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 \"dependencies\": {\r\n \"vue-demi\": \"^0.12.5\",\r\n },\r\n```\r\n\r\n```js\r\nmodule.exports = {\r\n chainWebpack: (config) => {\r\n config.externals(['@vue/composition-api', 'vue']);\r\n },\r\n};\r\n```\r\n--------------------------------\r\n\r\n**And in my consuming application:** \r\n```json\r\n\"dependencies\": {\r\n \"my-vue-demi-plugin\": \"1.0.0\",\r\n \"nuxt\": \"^2.15.2\",\r\n}\r\n```\r\n\r\n--------------------------------\r\n\r\nI'm getting the following error: \r\n\u003Cimg width=\"497\" alt=\"Screen Shot 2022-04-25 at 7 18 40 PM\" src=\"https://user-images.githubusercontent.com/2212763/165194784-1eb33040-08e7-467c-984f-ed369a03a61c.png\">\r\n\r\n--------------------------------\r\n\r\nUpon further inspection, I see that there's a `default` nested inside of external vue reference, which it seems that the install function isn't expecting. \r\n\r\n\u003Cimg width=\"862\" alt=\"Screen Shot 2022-04-25 at 7 11 52 PM\" src=\"https://user-images.githubusercontent.com/2212763/165194971-acef8f9e-5477-4207-8b5d-a71b60c2a502.png\">\r\n\u003Cimg width=\"966\" alt=\"Screen Shot 2022-04-25 at 7 20 01 PM\" src=\"https://user-images.githubusercontent.com/2212763/165194974-f535ed70-3560-412c-a2e8-8ac25b77b9da.png\">\r\n\r\n\r\nWhat am I missing here? 🤷 🤔 \r\n\r\n",[],155,"Nuxt 2 having issues with the lib_install function ","2022-04-27T14:10:36Z","https://github.com/vueuse/vue-demi/issues/155",0.67507493,{"description":2912,"labels":2913,"number":2914,"owner":2853,"repository":2854,"state":2855,"title":2915,"updated_at":2916,"url":2917,"score":2918},"Hello, I am trying to build a universal library for renderless components and composables as a plugin for Vue2 and Vue3 with the use of `vue-demi`. When I try to use the plugin in my Vue3 application locally via `yarn link` I get the following error: `Excessive stack depth comparing types 'Plugin_2' and 'Plugin_2'`. I am not sure if this is related to `vue-demi`, but I assume that, because my Vue3 application seems to interpret this plugin as a Vue2 plugin I guess.\r\n\r\nThis is the repository of the Plugin: https://github.com/whitelabel-market/wallet-connector-vue\r\n\r\nThe plugin is created like this:\r\n\r\n```javascript\r\nimport {\r\n ConnectModal,\r\n ConnectContent,\r\n ConnectTitle,\r\n ConnectButton,\r\n} from \"./components/modal\";\r\nimport { WALLET_CONTEXT, createWallet } from \"./hooks\";\r\nimport type { App, Plugin } from \"vue-demi\";\r\n\r\nexport function WalletConnectorVue(options: any): Plugin {\r\n return {\r\n install(app: App) {\r\n app.component(\"ConnectModal\", ConnectModal);\r\n app.component(\"ConnectContent\", ConnectContent);\r\n app.component(\"ConnectTitle\", ConnectTitle);\r\n app.component(\"ConnectButton\", ConnectButton);\r\n app.provide(WALLET_CONTEXT, createWallet(options));\r\n },\r\n };\r\n}\r\n```\r\n\r\nYou can reproduce this when you use the library as follows:\r\n\r\n```javascript\r\nimport { createApp } from \"vue\";\r\nimport App from \"./App.vue\";\r\nimport router from \"./router\";\r\nimport { INFURA_ID } from \"./utils/constants\";\r\nimport { WalletConnectorVue } from \"@whitelabel-solutions/wallet-connector-vue/dist\";\r\n\r\nconst app = createApp(App);\r\n\r\napp.use(\r\n WalletConnectorVue({\r\n appName: \"App Name\",\r\n infuraId: INFURA_ID,\r\n chainId: 1,\r\n authereum: { key: \"\" }, // Yet required (but unused) in ConnectorUserOptions type\r\n fortmatic: { key: \"\" }, // Yet required (but unused) in ConnectorUserOptions type\r\n })\r\n);\r\n\r\napp.use(router);\r\napp.mount(\"#app\");\r\n```\r\n\r\n> Notice that I am using the local build from the `/dist` folder! The `/dist` folder can be built with `pnpm build`\r\n\r\nThe VSCode intellisense also shows me this error directly:\r\n\r\n\u003Cimg width=\"754\" alt=\"Bildschirmfoto 2022-05-19 um 22 09 40\" src=\"https://user-images.githubusercontent.com/35061229/169396096-bb12b786-dcf8-457d-8da1-1f3c62186ac3.png\">\r\n\r\nOne thing I noticed is, that when I use this **not** as a plugin and just import the components directly, it works. The following example also works:\r\n\r\n```javascript\r\nconst app = createApp({\r\n setup() {\r\n provide(\r\n WALLET_CONTEXT,\r\n createWallet({\r\n appName: \"App Name\",\r\n infuraId: INFURA_ID,\r\n chainId: 1,\r\n authereum: { key: \"\" }, // Yet required (but unused) in ConnectorUserOptions type\r\n fortmatic: { key: \"\" }, // Yet required (but unused) in ConnectorUserOptions type\r\n })\r\n );\r\n },\r\n render: () => h(App),\r\n});\r\n```\r\n\r\nOnly when using this as a plugin as described above, it doesn't work. I really need help here, because I have absolutely no idea how to fix this.",[],160,"Excessive stack depth Error","2022-05-30T23:44:59Z","https://github.com/vueuse/vue-demi/issues/160",0.67691135,{"description":2920,"labels":2921,"number":2922,"owner":2853,"repository":2854,"state":2923,"title":2924,"updated_at":2925,"url":2926,"score":2927},"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.6189748,{"description":2929,"labels":2930,"number":2931,"owner":2853,"repository":2854,"state":2923,"title":2932,"updated_at":2933,"url":2934,"score":2935},"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.62003446,["Reactive",2937],{},["Set"],["ShallowReactive",2940],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPp0qDUX77AeNsSupHF7FSHk3n_Ayap-HxlPUw1eM-O8":-1},"/vueuse/vue-demi/237"]