\r\n \u003C/g>\r\n\u003C/svg>\r\n```\r\n\r\nTried something like below but it expects a `ref `instead of an `id`\r\n```\r\n iBody?.querySelectorAll(`[id^=\"color\"]`).forEach((item) => {\r\n const { finish } = useAnimate(item, [{ fill: color }, { fill: (getValue(\"color\", iBody) as string) || \"black\" }], {\r\n duration: 500,\r\n iterations: 5,\r\n })\r\n })\r\n```",[2915],{"name":2876,"color":2877},4219,"UseAnimate - Add support for targets with an id","2025-03-02T15:41:26Z","https://github.com/vueuse/vueuse/issues/4219",0.748146,{"description":2922,"labels":2923,"number":2925,"owner":2866,"repository":2866,"state":2867,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Clear and concise description of the problem\n\nUsing the new browser API `startViewTransition()` can be cumbersome because it needs to be called before any change in the DOM happens, but Vue renders the component as soon as a `ref` changes. \n\n### Suggested solution\n\nCheck browser support of `startViewTransition`: https://caniuse.com/mdn-css_properties_view-transition-name (Chrome only at the time of writing)\r\n\r\nTL;DR: demo here https://stackblitz.com/edit/vite-thbkze?file=src%2Fcomposables.ts,src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue\r\n\r\n\r\nhttps://github.com/user-attachments/assets/864b4dc4-7f20-4616-b844-58b4320b02a7\r\n\r\n\r\n\r\nAs you can see, clicking on the button fades the block color, even if no CSS transition has been set, so the view transition is actually working.\r\n\r\nIt's because the custom ref waits for `startViewTransition` before actually triggering:\r\n\r\n```ts\r\nexport const useTransitionRef = \u003CT>(value: T) => {\r\n let scopedValue = value;\r\n\r\n return customRef((track, trigger) => {\r\n return {\r\n get() {\r\n track();\r\n\r\n return scopedValue;\r\n },\r\n set(newValue) {\r\n if (\r\n !('startViewTransition' in document) ||\r\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\r\n ) {\r\n scopedValue = newValue;\r\n trigger();\r\n\r\n return;\r\n }\r\n\r\n // @ts-expect-error no types in TypeScript for now\r\n document.startViewTransition(() => {\r\n scopedValue = newValue;\r\n trigger();\r\n });\r\n },\r\n };\r\n });\r\n};\r\n```\r\n\r\nThere's also a computed alternative when we need to rely on `props` for instance, very handy for our use cases.\n\n### Alternative\n\nAt first I tried to use a \"temporary\" ref, but it means having two refs for one thing, it's verbose to write and hard to maintain. Also, it could mean double renders if something actually depends on the \"real\" ref too.\n\n### Additional context\n\nThe only downside is that it must be used with caution, as using view transitions on big components like tables can take some time, so the rendering can be slowed down. It's up to the developer to be careful though, not related to this implementation.\r\n\r\nThe feature is disabled altogether if the browser doesn't support it, or the user has asked for reduced motion; so the ref just behave normally.\r\n\r\nI can submit a PR if the community finds this useful 👍 \r\n\r\nNB. Original idea from Vue repository: https://github.com/vuejs/rfcs/discussions/690\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.",[2924],{"name":2887,"color":2888},4230,"Ref & computed waiting for `startViewTransition()` to ease transitions","2025-03-01T09:40:28Z","https://github.com/vueuse/vueuse/issues/4230",0.7699079,{"description":2931,"labels":2932,"number":2933,"owner":2866,"repository":2866,"state":2934,"title":2935,"updated_at":2936,"url":2937,"score":2938},"I'm thinking ... should we be returning 0,0 as the null default for latitude and longitude given that this is an actual location (roughly off the coast of Ghana)?\r\n\r\nI feel that we should have latitude and longitude as maybe null if the API is unavailable? Or perhaps ... since a valid latitude is between -90 and +90, and a valid longitude is between -180 and +180, we could perhaps return something which defies this validation but is still type consistent? e.g.,\r\n\r\n```ts\r\nconst coords: Ref\u003CGeolocationPosition['coords']> = ref({\r\n accuracy: 0,\r\n latitude: Infinity,\r\n longitude: Infinity,\r\n altitude: null,\r\n altitudeAccuracy: null,\r\n heading: null,\r\n speed: null,\r\n })\r\n```\r\n\r\nThat way, we know that the user / process / etc is actually at lat, long 0, 0 (rather than treating this as \"invalid\", which it is not...)\r\n\r\nWhat are the core team's thoughts on this?",[],838,"closed","useGeolocation() reactive shouldn't return { latitude, longitude } of {0, 0} by default","2022-02-15T13:08:52Z","https://github.com/vueuse/vueuse/issues/838",0.72837526,{"description":2940,"labels":2941,"number":2942,"owner":2866,"repository":2866,"state":2934,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### Clear and concise description of the problem\n\nCurrently, `useTimeout` does not do what one would expect, be a replacement for `window.setTimeout`.\nIt return a reactive ref instead of calling a callback !\n\n### Suggested solution\n\nI propose that `useTimeout` be renamed `useTimeoutRef`, and that `useTimeoutFn` be renamed `useTimeout`, which would align better with native browser behavior.\n\n### Alternative\n\n_No response_\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.",[],4683,"`useTimeout` and `useTimeoutFn` | should be renamed to be closer to browser behavior","2025-03-31T14:33:26Z","https://github.com/vueuse/vueuse/issues/4683",0.74453574,{"description":2948,"labels":2949,"number":2950,"owner":2866,"repository":2866,"state":2934,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Describe the bug\n\nterminal throws multiple warnings when running quasar in dev mode:\r\n\r\nexport 'set' (imported as 'set') was not found in 'vue-demi'\r\nexport 'del' (imported as 'del') was not found in 'vue-demi'\r\nexport 'default' (imported as 'Vue') was not found in 'vue'\r\nexport 'default' (reexported as 'Vue') was not found in 'vue' \r\nexport 'set' (imported as 'set$1') was not found in 'vue-demi'\r\n\r\nit seems the new version of vue-demi does not export some of the exports used by vueuse anymore:\r\nhttps://github.com/vueuse/vue-demi/releases/tag/v0.13.1\r\n\n\n### Reproduction\n\ntried to reproduce on codepen but error is not available through cdn i guess because it's a build/bundling problem?\n\n### System Info\n\n```Shell\nversion used:\r\n\"@vueuse/core\": \"8.7.5\"\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.",[],1733,"export 'set' (imported as 'set$1') was not found in 'vue-demi'","2024-10-04T11:31:18Z","https://github.com/vueuse/vueuse/issues/1733",0.7450448,["Reactive",2956],{},["Set"],["ShallowReactive",2959],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMvvd4w7hEqTFwQjCvZg6igRTobIDabTHFqqSXO3slRE":-1},"/vueuse/vueuse/4647"]