\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.701625,{"description":2870,"labels":2871,"number":2872,"owner":2853,"repository":2854,"state":2864,"title":2873,"updated_at":2874,"url":2875,"score":2876},"Hello @antfu,\r\n\r\nI am facing a strange issue while using `v6.0 ` of the `vue-demi` package in my project. I have a global 'store' which can also be accessed outside of the Vue-context (e.g. in `main.ts`). The `Vue.use(VueCompositionApi)` call is made before calling any composition-api related functions.\r\n\r\n```javascript\r\nimport { computed, reactive } from \"@vue/composition-api\"\r\nimport { toReadonlyState } from \"@/utils/composition\"\r\n\r\ninterface GeneralStore {\r\n token: string | null\r\n isAuthenticated: boolean\r\n isTranslationPresent: boolean\r\n translationError: boolean\r\n}\r\n\r\nconst state = reactive\u003CGeneralStore>({\r\n token: null,\r\n isAuthenticated: false,\r\n isTranslationPresent: false,\r\n translationError: false,\r\n})\r\n\r\nexport function useGeneralStore() {\r\n const mutations = {\r\n setToken: (token?: string) => {\r\n state.token = token ?? null\r\n },\r\n setIsAuthenticated: (isAuthenticated: boolean) => {\r\n state.isAuthenticated = isAuthenticated\r\n },\r\n setIsTranslationPresent: (isTranslationPresent: boolean) => {\r\n state.isTranslationPresent = isTranslationPresent\r\n },\r\n setTranslationError: (translationError: boolean) => {\r\n state.translationError = translationError\r\n },\r\n }\r\n\r\n return {\r\n ...toReadonlyState(state),\r\n ...mutations,\r\n }\r\n}\r\n\r\n```\r\n\r\nAfter upgrading vue-demi to `v6.0` the whole Vue2 application crashes on load with the following error:\r\n\r\n```\r\nUncaught TypeError: Cannot read property 'observable' of undefined\r\n at ht (vue-composition-api.esm.js:563)\r\n ah gt (vue-composition-api.esm.js:673)\r\n ...\r\n```\r\n\r\nIt seems Vue is undefined here...\r\n\r\n```javascript\r\n// vue-composition-api.esm.js\r\nfunction reactive(obj) {\r\n if ((process.env.NODE_ENV !== 'production') && !obj) {\r\n warn('\"reactive()\" is called without provide an \"object\".');\r\n // @ts-ignore\r\n return;\r\n }\r\n if (!(isPlainObject(obj) || isArray(obj)) ||\r\n isRaw(obj) ||\r\n !Object.isExtensible(obj)) {\r\n return obj;\r\n }\r\n var observed = observe(obj); // FIXME: this call crashes due to Vue = undefined (line 673)\r\n setupAccessControl(observed);\r\n return observed;\r\n}\r\n```\r\n\r\n```javascript\r\n// vue-composition-api.esm.js\r\nfunction observe(obj) {\r\n var Vue = getRegisteredVueOrDefault();\r\n var observed;\r\n if (Vue.observable) { // FIXME: Vue is undefined here (line 563)\r\n observed = Vue.observable(obj);\r\n }\r\n else {\r\n var vm = defineComponentInstance(Vue, {\r\n data: {\r\n $$state: obj,\r\n },\r\n });\r\n observed = vm._data.$$state;\r\n }\r\n // in SSR, there is no __ob__. Mock for reactivity check\r\n if (!hasOwn(observed, '__ob__')) {\r\n def(observed, '__ob__', mockObserver(observed));\r\n }\r\n return observed;\r\n}\r\n```",[],28,"[v.6.0] Vue undefined while using reactive","2021-01-17T12:08:44Z","https://github.com/vueuse/vue-demi/issues/28",0.7119639,{"description":2878,"labels":2879,"number":2880,"owner":2853,"repository":2853,"state":2864,"title":2881,"updated_at":2882,"url":2883,"score":2884},"Error:\r\n```\r\n139:44 No overload matches this call.\r\n Overload 1 of 2, '(docRef: DocumentReference\u003CTaskList[]>, errorHandler?: ((err: Error) => void) | undefined): Ref\u003CTaskList[] | null>', gave the following error.\r\n Argument of type 'CollectionReference\u003CDocumentData>' is not assignable to parameter of type 'DocumentReference\u003CTaskList[]>'.\r\n Type 'CollectionReference\u003CDocumentData>' is missing the following properties from type 'DocumentReference\u003CTaskList[]>': collection, set, update, delete\r\n Overload 2 of 2, '(docRef: Query\u003CTaskList[]>, errorHandler?: ((err: Error) => void) | undefined): Ref\u003CTaskList[][]>', gave the following error.\r\n Argument of type 'CollectionReference\u003CDocumentData>' is not assignable to parameter of type 'Query\u003CTaskList[]>'.\r\n The types returned by 'where(...)' are incompatible between these types.\r\n Type 'Query\u003CDocumentData>' is not assignable to type 'Query\u003CTaskList[]>'.\r\n Type 'DocumentData' is missing the following properties from type 'TaskList[]': length, pop, push, concat, and 28 more.\r\n```\r\nCode:\r\n```javascript\r\n type ID = string\r\n\r\n interface Task {\r\n id: ID\r\n title: string\r\n isDone: boolean\r\n }\r\n\r\n interface TaskList {\r\n id: ID\r\n title: string\r\n items: Task[]\r\n }\r\n```\r\n```javascript\r\n const tasksCollection = db\r\n .collection('users')\r\n .doc(userId)\r\n .collection('tasks')\r\n\r\n const tasks = useFirestore\u003CTaskList[]>(tasksCollection)\r\n```\r\nversions:\r\n```\r\n \"vue\": \"^2.6.11\",\r\n \"typescript\": \"^3.9.2\",\r\n \"firebase\": \"^7.14.4\",\r\n \"@vue/composition-api\": \"^0.3.4\",\r\n \"@vueuse/core\": \"^2.0.27\",\r\n \"@vueuse/firebase\": \"^2.0.27\",\r\n```",[],84,"vue2 useFirestore TS types error","2020-05-23T23:56:22Z","https://github.com/vueuse/vueuse/issues/84",0.71536,{"description":2886,"labels":2887,"number":2891,"owner":2853,"repository":2853,"state":2864,"title":2892,"updated_at":2893,"url":2894,"score":2895},"Since the `VueInstance` type is actually expressed as `any` instead of the expected `Vue` instance, the `MaybeElementRef` type dependent on `VueInstance` is also `any`. In the `useResizeObserver` method, the `target` parameter can be any Value, I can pass in any value such as numbers, strings, etc.Although there is a null value judgment in the `unrefElement` method, I personally feel that it does not meet the type semantics.\r\n\r\n\r\n\r\n\r\n\r\n\r\nIf this is intentional or designed, can you explain the intention? or directly close the issue.",[2888],{"name":2889,"color":2890},"bug","d73a4a",685,"The ts type error causes the actual code to be inconsistent with the semantics","2021-09-17T06:28:26Z","https://github.com/vueuse/vueuse/issues/685",0.72173387,{"description":2897,"labels":2898,"number":2902,"owner":2853,"repository":2853,"state":2864,"title":2903,"updated_at":2904,"url":2905,"score":2906},"This is a new function proposal.\r\n\r\nThis function is a helps implementing `v-model=\"obj\"`.\r\n\r\n### Usage \r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cinput v-model=\"a\" type=\"text\" />\r\n \u003Cinput v-model=\"b\" type=\"text\" />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineComponent, PropType, watch } from 'vue'\r\nimport { useVModelObject } from './useVModelObject'\r\n\r\nexport default defineComponent({\r\n props: {\r\n modelValue: {\r\n type: Object as PropType\u003C{ a: string, b: string }>,\r\n required: true\r\n }\r\n },\r\n setup(props) {\r\n const data = useVModelObject(props)\r\n return { ...data }\r\n }\r\n})\r\n\u003C/script>\r\n```\r\n\r\n### Sample implementation\r\n```ts\r\nimport { computed, getCurrentInstance, WritableComputedRef } from 'vue'\r\n\r\nexport const useVModelObject = \u003CP, K extends keyof P>(\r\n props: P,\r\n key = 'modelValue' as K,\r\n emit?: (name: string, ...args: any[]) => void\r\n): { [KK in keyof P[K]]: WritableComputedRef\u003CP[K][KK]> } => {\r\n const vm = getCurrentInstance()\r\n const _emit = emit ?? vm!.emit\r\n\r\n const computedObject: any = {}\r\n for (const k of Object.keys(props[key])) {\r\n computedObject[k] = computed({\r\n get() {\r\n return (props[key] as any)[k]\r\n },\r\n set(v) {\r\n _emit(`update:${key}`, { ...props[key], [k]: v })\r\n }\r\n })\r\n }\r\n return computedObject\r\n}\r\n```\r\n",[2899],{"name":2900,"color":2901},"enhancement","a2eeef",431,"`useVModelObject`","2021-04-21T22:56:48Z","https://github.com/vueuse/vueuse/issues/431",0.7257083,{"description":2908,"labels":2909,"number":2910,"owner":2853,"repository":2853,"state":2864,"title":2911,"updated_at":2912,"url":2913,"score":2914},"Hi, This library is really helpful and awesome :heart: \r\n\r\nI used Vuetify, BootstrapVue, and Quasar in my development period. Recently, with Vue 3 update and change in template ref, Accessing components' internal value using computed is somehow a hard time for me. I am unable to find the best way for it.\r\n\r\ne.g. I am using Vuetify's `v-menu` component and I want to get the computed value of its `isActive` property.\r\n\r\nAs we can only access the value of template ref in `onMounted`, I am unable to find out the best way to create computed of `refMenu.value.isActive`\r\n\r\nSo, May I know there can be util function for getting the internal value of the component (Similar to controlledComputed).\r\n\r\n```js\r\nimport {templateRef, internalComputed} from '@vueuse/core'\r\n\r\n// template ref\r\nconst refMenu = templateRef(null)\r\n\r\n// Computed property which returns `null` until template ref is resolved\r\n// and once it is resolved returns computed value of given property.\r\nconst isMenuActive = internalComputed(refMenu, 'isActive')\r\n```\r\n\r\nRegards :pray: ",[],455,"[Feature Request] Third Party Component Computed Property","2021-11-03T08:20:34Z","https://github.com/vueuse/vueuse/issues/455",0.7266841,{"description":2916,"labels":2917,"number":2919,"owner":2853,"repository":2853,"state":2864,"title":2920,"updated_at":2921,"url":2922,"score":2923},"The type definition file for the Vue 3 version of Vueuse attempts to import `@vue/composition-api` which causes errors at build time. I don't believe this package is needed for Vue 3 and installing it causes more errors as it depends on Vue 2\r\n\r\nRelevant Packages:\r\n```\r\n\"@vueuse/core\": \"^3.0.34\",\r\n\"core-js\": \"^3.6.4\",\r\n\"vue\": \"^3.0.0-beta.17\"\r\n```\r\n\r\nError Log:\r\n```\r\nERROR Failed to compile with 2 errors5:22:59 AM\r\n1:22:59 AM: error in /opt/build/repo/node_modules/@vueuse/core/index.d.ts\r\n1:22:59 AM: ERROR in /opt/build/repo/node_modules/@vueuse/core/index.d.ts(1,51):\r\n1:22:59 AM: 1:51 Cannot find module '@vue/composition-api' or its corresponding type declarations.\r\n1:22:59 AM: > 1 | import { Ref, WatchStopHandle, ComputedRef } from '@vue/composition-api';\r\n1:22:59 AM: | ^\r\n1:22:59 AM: 2 | import { Ref as Ref$1 } from '@vue/runtime-dom';\r\n1:22:59 AM: 3 | \r\n1:22:59 AM: 4 | declare function createGlobalState\u003CT extends object>(factory: () => T): () => T;\r\n1:22:59 AM: error in /opt/build/repo/node_modules/@vueuse/core/index.d.ts\r\n1:22:59 AM: ERROR in /opt/build/repo/node_modules/@vueuse/core/index.d.ts(7,23):\r\n1:22:59 AM: 7:23 Cannot find module '@vue/composition-api' or its corresponding type declarations.\r\n1:22:59 AM: 5 | \r\n1:22:59 AM: 6 | declare function useAsyncState\u003CT>(promise: Promise\u003CT>, defaultState: T, delay?: number, catchFn?: (e: Error) => void): {\r\n1:22:59 AM: > 7 | state: Ref\u003Cimport(\"@vue/composition-api\").UnwrapRef\u003CT>>;\r\n1:22:59 AM: | ^\r\n1:22:59 AM: 8 | ready: Ref\u003Cboolean>;\r\n1:22:59 AM: 9 | };\r\n```",[2918],{"name":2889,"color":2890},94,"Incorrect type definition file for Vue 3 version of Vueuse.","2020-07-01T18:11:39Z","https://github.com/vueuse/vueuse/issues/94",0.7291693,{"description":2925,"labels":2926,"number":2928,"owner":2853,"repository":2853,"state":2864,"title":2929,"updated_at":2930,"url":2931,"score":2932},"Hi, Sometimes we need to use refs on templates, and this can be encapsulated in a hook.\r\n\r\nPossible implementation:\r\n\r\n```typescript\r\nconst useVForRefs = () => {\r\n const refs = ref([])\r\n\r\n const setRef = (el) => {\r\n if (el) {\r\n refs.value.push(el)\r\n }\r\n }\r\n\r\n onBeforeUpdate(() => {\r\n refs.value.length = 0\r\n })\r\n\r\n return {\r\n refs,\r\n setRef,\r\n }\r\n}\r\n```\r\n\r\nExample:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv v-for=\"item in list\" :ref=\"listRef.setRef\">\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst listRef = useVForRefs()\r\n\u003C/script>\r\n```\r\n\r\nRef:\r\nhttps://v3.vuejs.org/guide/migration/array-refs.html#migration-strategy\r\n\r\nThanks for the useful and awesome library ❤️.\r\n",[2927],{"name":2900,"color":2901},590,"[feature] useVForRefs - Shorthand for v-for Array Refs","2021-08-09T13:15:51Z","https://github.com/vueuse/vueuse/issues/590",0.72927237,{"description":2934,"labels":2935,"number":2939,"owner":2853,"repository":2853,"state":2864,"title":2940,"updated_at":2941,"url":2942,"score":2943},"In Vue 2:\r\n```typescript\r\nuseVModel(props, 'value', emit); // emit event is `update:value`, the correct event should be `input`\r\nuseVModel(props, undefined, emit); // emit event is `input`, but the returned type is type of each props\r\n```\r\n\r\nreproduction repo: https://github.com/sxzz/vueuse-usevmodel\r\n\r\nWe can add an options, `event`",[2936],{"name":2937,"color":2938},"pr welcome","7E3DD1",402,"Optimize the logic of useVModel","2021-05-07T08:28:32Z","https://github.com/vueuse/vueuse/issues/402",0.7318623,["Reactive",2945],{},["Set"],["ShallowReactive",2948],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffXhfrmzkZmF4qPPsLMl0jumYGMaoqtLnEMdPqQTIYDo":-1},"/vueuse/vue-demi/240"]