\r\n```\r\n\n\n### Suggested solution\n\nWriteable versions of `refDebounced()` and `refThrottled()` that take an inner writeable ref and wrap it in a new writeable ref with debouncing, and returns the new writeable ref for use in calling code.\r\n\r\nNot sure what they might be named, but `refDebouncedWrite()` and `refThrottledWrite()` seems like sensible names to be.\n\n### Alternative\n\nAnother option would be to make the existing `refDebounced()` and `refThrottled()` support bidirectional use, using new option properties in order to maintain backward compatibility.\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[3018],{"name":3019,"color":3020},"enhancement","a2eeef",4324,"vueuse","open","Add a composable that wraps an inner writeable ref in a new debouncing writeable ref","2025-01-24T13:20:53Z","https://github.com/vueuse/vueuse/issues/4324",0.70147884,{"description":3029,"labels":3030,"number":3031,"owner":3022,"repository":3022,"state":3023,"title":3032,"updated_at":3033,"url":3034,"score":3035},"### Describe the bug\r\n\r\nI provide `containerElement` and `onStart` params.\r\n When the dragging start, `onStart` callback get the position data. \r\nBut it looks like a wrong data . position.x is `e.clientX - (targetRect.left - containerRect!.left + container.scrollLeft)`.\r\nI hope it is dragable Element position.\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/devbox/test-vueuse-draggable-mzjkgr?embed=1&file=%2Fsrc%2FApp.vue\r\n\r\n### System Info\r\n\r\n```Shell\r\nwindows, Chrome/121.0.0.0\r\n@vueuse/core@10.7.2\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\npnpm\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://vueuse.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\r\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\r\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],3770,"UseDraggable onStart callback argument `position` issue","2025-01-24T13:11:25Z","https://github.com/vueuse/vueuse/issues/3770",0.72750086,{"description":3037,"labels":3038,"number":3040,"owner":3022,"repository":3022,"state":3023,"title":3041,"updated_at":3042,"url":3043,"score":3044},"### Clear and concise description of the problem\n\nParentComponent.vue:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CChildComponent \r\n v-for=\"(el, ind) in list\" \r\n :key=\"ind\"\r\n :item=\"el\" />\r\n\u003C/template>\r\n```\r\n\r\nAnd the only way to get the `key` in the `ChildComponent` is to add an `:index=\"ind\"` prop.\n\n### Suggested solution\n\n```ts\r\nexport function useKey\u003CT>(target?: any): T|null {\r\n const instance = getLifeCycleTarget(target)\r\n\r\n return instance.vnode.key\r\n}\r\n```\n\n### Alternative\n\nAdd the `index` prop inside `ChildComponent` and pass the `ind` to it\n\n### Additional context\n\nIf it's OK, I can submit a PR. The suggested solution code is based on the `tryOnBeforeMount` function.\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[3039],{"name":3019,"color":3020},3859,"feat(useKey): function to get child v-for key","2025-01-24T13:08:25Z","https://github.com/vueuse/vueuse/issues/3859",0.7285411,{"description":3046,"labels":3047,"number":3051,"owner":3022,"repository":3022,"state":3023,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Describe the bug\n\nI am using the orientation returned by useScreenOrientation to determine the rotation of the phone screen. However, on some iOS phones' Safari browsers **(I have not found a pattern in the browser version or system version)**\r\n\r\ntheir return value always returns the previous value, for example: when I enter the page in portrait mode, when I turn the screen horizontally, it returns 'portrait-primary', and when I turn the screen vertically again, I get 'landscape-primary'\r\n\r\nWhen I use the native `orientationchange` to listen and get `window.screen.orientation.type` directly, they also have the same phenomenon. I currently use the delayed acquisition method to get the correct value, which is implemented as follows:\r\n\r\n```javascript\r\nconst orientation = ref(window.screen.orientation.type)\r\n\r\nwindow.addEventListener('orientationchange', () => {\r\n setTimeout(() => {\r\n orientation.value = window.screen.orientation.type\r\n }, 100)\r\n})\r\n```\r\n\r\nI understand that this should be a system-level or browser-level error, but I think `Vueuse` as a tool library can handle it so that users can use it directly without obstacles.\r\n\r\nIn addition, I admit that my implementation is not a good solution, mainly because I don’t understand the essence of this phenomenon. \r\n\r\nWe can also discuss how to solve this problem more robustly.\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-5jdpbr?file=src%2FApp.vue\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor\r\n Memory: 14.89 GB / 31.89 GB\r\n Binaries:\r\n Node: 22.0.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 10.5.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 9.10.0 - C:\\Program Files\\nodejs\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (127.0.2651.74)\r\n Internet Explorer: 11.0.19041.4355\r\n npmPackages:\r\n @vueuse/core: ^11.0.3 => 11.0.3\r\n vue: ^3.5.4 => 3.5.4\n```\n\n\n### Used Package Manager\n\npnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[3048],{"name":3049,"color":3050},"needs reproduction","f2f08a",4220,"[useScreenOrientation] The orientation value returned by Safari on some iOS phones is incorrect","2025-02-06T07:46:49Z","https://github.com/vueuse/vueuse/issues/4220",0.72960395,{"description":3057,"labels":3058,"number":3062,"owner":3022,"repository":3022,"state":3023,"title":3063,"updated_at":3064,"url":3065,"score":3066},"Most returned refs should be readonly\r\n\r\ni.e.\r\n```ts\r\nconst { width, height } = useWindowSize()\r\n```\r\n\r\n_Originally posted by @OrbisK in https://github.com/vueuse/vueuse/discussions/4548#discussioncomment-11985352_",[3059],{"name":3060,"color":3061},"BREAKING CHNAGE","9F353A",4576,"Tracking inconsistencies: some returned `ref`s should be `readonly`","2025-02-10T10:30:11Z","https://github.com/vueuse/vueuse/issues/4576",0.7296976,{"description":3068,"labels":3069,"number":3071,"owner":3022,"repository":3022,"state":3023,"title":3072,"updated_at":3073,"url":3074,"score":3075},"### Describe the bug\n\nAccording to TS `unrefElement` [returns](https://github.com/vueuse/vueuse/tree/master/packages/core/unrefElement/index.ts#L10) a `HTMLElement | SVGElement | null | undefined` but in reality `VueInstance.$el` could also be a `(Text)Node`. See repro link for a ref on a multi root component.\r\n\r\nThis can cause issues in utils like `useResizeObserver` as nodes cannot be observed, only element's can.\r\n\n\n### Reproduction\n\nhttps://play.vuejs.org/#eNqNVNuO2jAQ/RXLL7ASTdTLUxSg7Qqprdpt1e5jXrJhgOw6tuULUEX5951xCGvQgvYp9pwzM2cuccu/aJ1sPfCM57YytXbMgvOaiVKupwV3tuCzQtaNVsaxlhlYTdiudNWGdWxlVMNG6D2KGF4iZyGgAemOnM9I8hbSSpmIfKsafSAkKV1ICcKFrJS0jlWETynnWHohbghx/zUEx9sNVE+ItoVkrLbf7n/9PGSdZ+xBKQEl0gm6YL5TS4htXZSYYgd1IXt+zDcbt12QEVowJoETFj43bDrrtfQhQKBv3IueRb5IGeIn21J4GKo4qyOjIDUGK2UFasUiaDLQL1DPaVTrOYdsgYCF90Xlab8COHC8OGi0KB3gjYLk+nCgeKxtoyJOVLM5G5UjlrGRVI7hqeti5fmDSa8EuhLkbQGoqte8yR655imVQ+cwXJoybjuNqOCMSHka1V9IPuH90r5rSp08WiXxjwlDKw4A/ijZMMaCxwtPQME3zmmbpelut0u81E/rBLOlMW/eqKUXSB+GgkmdxXVa1euzlCS0FmB+a1fjup2kLoVQux/B5ozvRxx8qEuv2B/tvlf4x4AFs0UBR8yVZg2uhxf/7mCP5yM4yL0C/gWrhCeNPe2rl0uUHfGC2u+hg7Vc39vF3oG0Q1EkNHQj8AuO3aJxXSr9Re7H5FPUxeFtoVfuZK3zZb09bERYnPfBmA7Wc/hDDJ9sCO+eAcADwRw=\n\n### System Info\n\n```Shell\nVue SFC playground\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[3070],{"name":3019,"color":3020},4026,"unrefElement could return a Node instead of HTMLElement (f.e. for a VueInstance with multiple root nodes)","2025-03-01T08:53:15Z","https://github.com/vueuse/vueuse/issues/4026",0.7326402,{"description":3077,"labels":3078,"number":3079,"owner":3022,"repository":3022,"state":3080,"title":3081,"updated_at":3082,"url":3083,"score":3084},"### Describe the bug\n\nWhen passing element with a label and input to `ignore` option, click event is fired twice, but `event.detail` property is different from the one in chrome. There is check a for `event.detail === 0`, so we expect that event fired for `input` will have 0 click count, but firefox provides value of `1`, instead of `0`, so check for zero is not enough. \r\n\r\nSteps to reproduce:\r\n- Create a label with input radio inside. \r\n- Pass this label to `ignore` option of `onClickOutside`\r\n- Click this label\r\n\r\nExpected result in Firefox:\r\n- Click outside is not triggered\r\n\r\nCurrent result in Firefox:\r\n- Click outside is triggered\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-64l4fn?file=src%2FApp.vue\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Linux 6.5 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz\r\n Memory: 3.16 GB / 15.49 GB\r\n Container: Yes\r\n Shell: 5.8.1 - /usr/bin/zsh\r\n Binaries:\r\n Node: 18.16.0 - ~/.config/nvm/versions/node/v18.16.0/bin/node\r\n Yarn: 1.22.19 - ~/.config/nvm/versions/node/v18.16.0/bin/yarn\r\n npm: 9.5.1 - ~/.config/nvm/versions/node/v18.16.0/bin/npm\r\n pnpm: 8.15.4 - ~/.local/share/pnpm/pnpm\r\n bun: 1.0.14 - ~/.bun/bin/bun\r\n Browsers:\r\n Chrome: 122.0.6261.57\r\n Firefox: 128.0\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],4103,"closed","`onClickOutside` `ignore` option does not work as expected in Firefox when combined with input surrounded by a label","2025-01-22T16:45:23Z","https://github.com/vueuse/vueuse/issues/4103",0.7093086,{"description":3086,"labels":3087,"number":3089,"owner":3022,"repository":3022,"state":3080,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Clear and concise description of the problem\r\n\r\nI have sometimes found it useful to be able to merge several individual refs together into a single object ref while maintaining reactivity to the original refs. Many of the reasons being so that a single object can be used in other vueuse composables like `useRefHistory` and `useLocalStorage`.\r\n\r\n### Suggested solution\r\n\r\nBelow is the `mergeRef` composable I wrote and use personally. The typing needs work, but it's functional.\r\n\r\n```ts\r\nimport { ref, watch, Ref } from 'vue'\r\n\r\nexport function useMergeRef(targets: Record\u003Cstring, Ref>) {\r\n const merged = ref(\r\n Object.fromEntries(\r\n Object.entries(targets).map(([key, target]) => [key, target.value])\r\n )\r\n )\r\n\r\n // propagate changes to the target refs to our merged ref\r\n watch(\r\n () => targets,\r\n (val) => {\r\n Object.keys(val).forEach((key) => {\r\n merged.value[key] = targets[key].value\r\n })\r\n },\r\n { deep: true }\r\n )\r\n\r\n // propagate changes in the merged ref back to the target refs\r\n watch(\r\n () => merged,\r\n (val) => {\r\n Object.keys(val.value).forEach((key) => {\r\n targets[key].value = merged.value[key]\r\n })\r\n },\r\n { deep: true }\r\n )\r\n\r\n return merged\r\n}\r\n```\r\n\r\n\r\n### Alternative\r\n\r\nTwo alternatives would be:\r\n\r\n1. Duplicate a lot of code for each ref.\r\n2. Write boilerplate code to manually serialize and deserialize refs into objects for use in other composables.\r\n\r\n### Additional context\r\n\r\n**I am willing to create a PR for this!**\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://vueuse.org/guide).\r\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[3088],{"name":3019,"color":3020},2787,"useMergeRef to merge many refs into a single ref and maintain reactivity to the individual refs","2023-04-26T13:12:56Z","https://github.com/vueuse/vueuse/issues/2787",0.70936465,{"description":3095,"labels":3096,"number":3097,"owner":3022,"repository":3022,"state":3080,"title":3098,"updated_at":3099,"url":3100,"score":3101}," This is breaking the usage of unref (at least in 2.7)\r\n\r\nFor `dialogTitle: MaybeRef\u003Cstring>`, when using\r\n`const title = unref(dialogTitle);`\r\nwe are now getting \r\n\r\ninstead of `title: string`\r\n\r\nDoes this mean unref has to get updated or should we use isRef (which is still working as expected for a MaybeRef type)?\r\n\r\n_Originally posted by @johuhype in https://github.com/vueuse/vueuse/issues/4099#issuecomment-2283692239_\r\n ",[],4144,"Updated MaybeRef breaks usage of unref","2024-12-23T15:04:23Z","https://github.com/vueuse/vueuse/issues/4144",0.7144951,{"description":3103,"labels":3104,"number":3105,"owner":3022,"repository":3022,"state":3080,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Describe the bug\n\nI'm using @vueuse/router and @vueuse/nuxt. I have a page that has one required route param and one optional route param. When trying to remove the optional param using the ref from `useRouteParams`, the url doesn't change correctly. I've tried setting the ref to an empty string, null and undefined. Tried with and without a default value for the route param. Doesn't work.\n\n### Reproduction\n\nhttps://github.com/mtdvlpr/reproduction\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 11 10.0.22621\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz\r\n Memory: 20.55 GB / 31.70 GB\r\n Binaries:\r\n Node: 18.18.2 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 3.6.4 - C:\\Program Files\\nodejs\\yarn.CMD\r\n npm: 9.8.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Chromium (119.0.2151.44)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n @vueuse/nuxt: ^10.5.0 => 10.5.0\r\n @vueuse/router: ^10.5.0 => 10.5.0\r\n nuxt: ^3.8.1 => 3.8.1\r\n vue: ^3.3.8 => 3.3.8\n```\n\n\n### Used Package Manager\n\nyarn\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],3536,"useRouteParams doesn't allow removing the parameter by setting it to empty string / null / undefined","2024-12-23T11:07:24Z","https://github.com/vueuse/vueuse/issues/3536",0.72081286,["Reactive",3111],{},["Set"],["ShallowReactive",3114],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frh3yrTIB_b4ZB9rVfFqEu2bcdOZYsGWwSy_HizTF2G8":-1},"/vueuse/vueuse/4178"]