` component which emits startGame_\r\n\r\nHere is the code:\r\n```\r\n\u003Ctemplate>\r\n \u003CModal @startGame=\"startGame\" />\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { useSound } from '@vueuse/sound'\r\nimport bgAudio from '@/assets/audio/stranger-things.mp3'\r\n\r\nexport default {\r\n setup() {\r\n const { play } = useSound(bgAudio)\r\n\r\n const startGame = () => {\r\n /* other codes here */\r\n play()\r\n }\r\n return {\r\n startGame\r\n }\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n",[],"sound","TypeError: Cannot read properties of undefined (reading 'version')","2022-11-25T02:10:33Z","https://github.com/vueuse/sound/issues/17",0.7355727,{"description":3191,"labels":3192,"number":3196,"owner":3176,"repository":3176,"state":3177,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Describe the bug\n\nThis bug cannot be replicated in Stackblitz, possibly due to how it handles SSR, so the reproduction below is for requirements and nothing else.\n\nuseBreakpoints with SSR enabled and an SSR breakpoint defined returns all breakpoints at all screen sizes as undefined e.g. `lg:undefined(Computed)`. Removing ssrWidth makes no difference. Explicitly importing the function makes no difference.\n\nbreakpoints defined as:\n```\nimport { useBreakpoints } from '@vueuse/core';\n\nconst breakpoints = useBreakpoints(\n\t{\n\t\tsm: 640,\n\t\tmd: 768,\n\t\tlg: 1024,\n\t\txl: 1280,\n\t\t'2xl': 1536\n\t},\n\t{ ssrWidth: 768 }\n);\n```\n\nVersions used:\n```\n\"@vueuse/core\": \"^13.1.0\",\n\"@vueuse/nuxt\": \"^13.1.0\",\n\"nuxt\": \"^3.17.1\"\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-zsxdeyzz?file=components%2FChildComponent.vue\n\n### System Info\n\n```Shell\nSystem:\n OS: macOS 15.4\n CPU: (10) arm64 Apple M1 Pro\n Memory: 106.00 MB / 16.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node\n npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm\n pnpm: 10.10.0 - ~/.nvm/versions/node/v22.14.0/bin/pnpm\n Browsers:\n Brave Browser: 135.1.77.101\n Chrome: 135.0.7049.115\n Safari: 18.4\n npmPackages:\n @vueuse/core: ^13.1.0 => 13.1.0 \n @vueuse/nuxt: ^13.1.0 => 13.1.0 \n @vueuse/router: ^13.1.0 => 13.1.0 \n vue: ^3.5.13 => 3.5.13\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.",[3193],{"name":3194,"color":3195},"pending triage","d73a4a",4734,"BUG | `useBreakpoints` | all breakpoints are undefined","2025-05-01T22:42:14Z","https://github.com/vueuse/vueuse/issues/4734",0.7463072,{"description":3202,"labels":3203,"number":3204,"owner":3176,"repository":3176,"state":3205,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Describe the bug\r\n\r\nUsing objects for the steps relies on the key order of the wrapper object being maintained.\r\n\r\nWhile there are possibilities that the order is entirely random, in general engines have followed certain rules rules for quite a while, with the spec being updated afterward.\r\nThe order for non-inherited properties is:\r\n\r\n- Integer-like keys in ascending order\r\n- String keys in insertion order\r\n- Symbols in insertion order\r\n\r\n\u003Cdetails>\r\n\u003Csummary>\r\nExpand for more detail on specs and such\r\n\u003C/summary>\r\n\r\nThere was almost no spec for this prior to ES2015, and it was only properly specced in ES2020.\r\nFrom [an SO answer](https://stackoverflow.com/a/5525820/15261914): \"The iteration order for objects follows [a certain set of rules](https://stackoverflow.com/a/38218582/292500) since ES2015, but it does not (always) follow the insertion order.\"\r\n\r\nFrom that second link:\r\n\r\n> The order for \"own\" (non-inherited) properties is:\r\n> \r\n> - Integer-like keys in ascending order\r\n> - String keys in insertion order\r\n> - Symbols in insertion order\r\n> \r\n> Thus, there are three segments, which may alter the insertion order (as happened in the example). And integer-like keys don't stick to the insertion order at all.\r\n> \r\n> In ES2015, only certain methods followed the order:\r\n> \r\n> - `Object.assign`\r\n> - `Object.defineProperties`\r\n> - `Object.getOwnPropertyNames`\r\n> - `Object.getOwnPropertySymbols`\r\n> - `Reflect.ownKeys`\r\n> - `JSON.parse`\r\n> - `JSON.stringify`\r\n> \r\n> As of ES2020, all others do (some in specs between ES2015 and ES2020, others in ES2020), which includes:\r\n> \r\n> - `Object.keys, Object.entries, Object.values, ...`\r\n> - `for..in`\r\n\r\n\u003C/details>\r\n\r\nWhile there is the possibility that this doesn't work in older browsers, I don't believe this is an issue, especially moving forward.\r\n\r\nHowever, if this composable is used with a combination of integer keys and non-integer keys, the order will not be maintained, as stated in the rules given above, _which is an actual issue_.\r\nE.g. \"Intro, 1, 2, 3, End\" would be changed to \"1, 2, 3, Intro, End\".\r\n\r\n~~A potential fix is to rather pass an array of objects, with each an extra property in each object to specify the name.~~ Rejected, as it requires a special property in each step object.\r\n\r\nA potential solution is to use the entries structure (ala `Object.entries()`), where the value is an array instead of an object and each property is given as a tuple of the key and object. \r\nFor example:\r\n\r\n```js\r\nconst stepper = useStepper([\r\n ['user-information', {\r\n title: 'User information',\r\n isValid: () => form.firstName && form.lastName,\r\n }],\r\n ['billing-address', {\r\n title: 'Billing address',\r\n isValid: () => !!form.billingAddress,\r\n }],\r\n ['terms', {\r\n title: 'Terms',\r\n isValid: () => form.contractAccepted === true,\r\n }],\r\n ['payment', {\r\n title: 'Payment',\r\n isValid: () => ['credit-card', 'paypal'].includes(form.payment),\r\n }],\r\n])\r\n```\r\n\r\nThis is not that different in style to the original: the top-level object is changed to an array, and for each item the key-value pair is changed to an array.\r\n\r\nIt can vene be generated using the original object structure by simply passing the original value to `Object.entries()`.\r\n\r\nIf possible, a potentially better solution is to allow both argument structures and do that conversion internally: it accepts an object as before, and the entries structure, but internally uses the entries structure and converts an object argument to it using `Object.entries()`. \r\nThe drawbacks I see are some implementation complexity and the possibility for fragmentation.\r\n\r\n### Reproduction\r\n\r\n[VueUse `useStepper` key-order issue repro on StackBlitz](https://stackblitz.com/edit/vitejs-vite-hnxybv)\r\n\r\n### System Info\r\n\r\n(Taken from the StackBlitz repro.)\r\n\r\n```Shell\r\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\nBinaries:\r\n Node: 16.14.2 - /usr/local/bin/node\r\n Yarn: 1.22.10 - /bin/yarn\r\n npm: 7.17.0 - /bin/npm\r\nnpmPackages:\r\n @vueuse/core: ^8.9.0 => 8.9.0 \r\n vue: ^3.2.25 => 3.2.31\r\n```\r\n\r\n### Used Package Manager\r\n\r\nnpm\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.",[],1780,"closed","bug(useStepper): using object steps relies on object key order being maintained","2023-09-04T15:51:03Z","https://github.com/vueuse/vueuse/issues/1780",0.68034315,{"description":3211,"labels":3212,"number":3213,"owner":3176,"repository":3214,"state":3205,"title":3215,"updated_at":3216,"url":3217,"score":3218},"I use [vue-echarts](https://github.com/ecomfe/vue-echarts) in my library, but when I connect the component, I see the following error:\r\n\r\n\r\nWhat could be the problem?\r\n",[],124,"vue-demi","Cannot read properties of undefined (reading 'version')","2022-01-21T05:50:18Z","https://github.com/vueuse/vue-demi/issues/124",0.707365,{"description":3220,"labels":3221,"number":3225,"owner":3176,"repository":3176,"state":3205,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Describe the bug\n\nTypeScript reports an error when `class` is passed to `UseElementSize`\r\n\r\n```\r\n\u003CUseElementSize v-slot=\"{ width, height }\" class=\"myclass\">\r\n```\r\n\r\nThe error is:\r\n\r\n```\r\nArgument of type '{ class: string; }' is not assignable to parameter of type '{ readonly width: number; readonly height: number; readonly box?: ResizeObserverBoxOptions | undefined; readonly window?: Window | undefined; readonly as?: string | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record\u003C...>'.\r\n Type '{ class: string; }' is missing the following properties from type '{ readonly width: number; readonly height: number; readonly box?: ResizeObserverBoxOptions | undefined; readonly window?: Window | undefined; readonly as?: string | ... 1 more ... | undefined; }': width, height\r\n```\n\n### Reproduction\n\nhttps://github.com\n\n### System Info\n\n```Shell\nTypeScript 5.5.4\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- [ ] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[3222],{"name":3223,"color":3224},"needs reproduction","f2f08a",4351,"BUG | `UseElementSize` | Typescript does not allow to pass class=\"foo\"","2025-01-06T12:38:50Z","https://github.com/vueuse/vueuse/issues/4351",0.7270603,{"description":3231,"labels":3232,"number":3239,"owner":3176,"repository":3176,"state":3205,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Describe the bug\n\nit's \u003C.value> ?\r\n\u003Cimg width=\"808\" alt=\"截屏2024-04-01 14 39 58\" src=\"https://github.com/vueuse/vueuse/assets/26219414/9ed4b79a-83e7-4fa6-9b75-8e81d4100904\">\r\n\n\n### Reproduction\n\nis .value ?\n\n### System Info\n\n```Shell\nbrowsers\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.",[3233,3236],{"name":3234,"color":3235},"documentation","0075ca",{"name":3237,"color":3238},"vue: upstream","0E8A16",3900,"property is error ?","2024-04-02T07:59:36Z","https://github.com/vueuse/vueuse/issues/3900",0.72762823,{"description":3245,"labels":3246,"number":3247,"owner":3176,"repository":3176,"state":3205,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Describe the bug\n\nWith VueUse 1.6.0 I have got an error that is not present in version 1.5.0.\r\nError:\r\n```\r\nnuxt.js:97 [nuxt] error caught during app initialization TypeError: Cannot read properties of null (reading 'document')\r\n```\r\nIn the reproduction I have produced error with using `useInfiniteScroll` function (found same for `useScroll`) and it happens because on top of ref element I have an element with conditional rendering. \r\nWhile testing, I have noticed that if I remove condition for rendering the element, error does not appear.\r\nI have an example where I need the condition to be part of element tree that renders scrolling element and it worked in 1.5.0\n\n### Reproduction\n\nhttps://github.com/frasza/vueuse-nuxt-scroll\n\n### System Info\n\n```Shell\nNuxi info:\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.8.1\r\n- CLI Version: 3.9.1\r\n- Nitro Version: 2.7.2\r\n- Package Manager: pnpm@8.9.0\r\n- Builder: -\r\n- User Config: modules, ssr, devtools\r\n- Runtime Modules: @vueuse/nuxt@10.6.0, @nuxtjs/tailwindcss@6.9.4\r\n- Build Modules: -\r\n------------------------------\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.",[],3543,"VueUse 1.6.0 - Cannot read properties of null (reading 'document')","2023-11-13T09:57:41Z","https://github.com/vueuse/vueuse/issues/3543",0.7278434,{"description":3253,"labels":3254,"number":3255,"owner":3176,"repository":3176,"state":3205,"title":3256,"updated_at":3257,"url":3258,"score":3259},"### Describe the bug\r\n\r\nuse response.value.body.getReader()\r\nwarning :Failed to execute 'getReader' on 'ReadableStream': ReadableStreamDefaultReader constructor can only accept readable streams that are not yet locked to a reader\r\n\r\n\r\nBecause: data = responseData = await fetchResponse[config.type]() \r\n/useFetch/index.ts :442\r\n\r\nI wish default return data can be configurable\r\n\r\n### Reproduction\r\n\r\nnone\r\n\r\n### System Info\r\n\r\n```Shell\r\nmacos\r\nvite\r\nvue3\r\ntypescript\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.",[],3028,"useFetch failed to execute 'getReader' on 'ReadableStream'","2023-07-02T19:16:48Z","https://github.com/vueuse/vueuse/issues/3028",0.73370486,{"description":3261,"labels":3262,"number":3263,"owner":3176,"repository":3176,"state":3205,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Describe the bug\n\n## Syntax error, you shouldn't use \"const A extends ...\"\r\n\r\n```javascript\r\n\r\nexport function makeDestructurable\u003C\r\n T extends Record\u003Cstring, unknown>,\r\n const A extends readonly any[],\r\n>(obj: T, arr: A): T & A {\r\n if (typeof Symbol !== 'undefined') {\r\n const clone = { ...obj }\r\n\r\n Object.defineProperty(clone, Symbol.iterator, {\r\n enumerable: false,\r\n value() {\r\n let index = 0\r\n return {\r\n next: () => ({\r\n value: arr[index++],\r\n done: index > arr.length,\r\n }),\r\n }\r\n },\r\n })\r\n\r\n return clone as T & A\r\n }\r\n else {\r\n return Object.assign([...arr], obj) as unknown as T & A\r\n }\r\n}\r\n```\r\n\n\n### Reproduction\n\nnull\n\n### System Info\n\n```Shell\nnull\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.",[],4023,"Syntax error","2024-06-11T13:29:53Z","https://github.com/vueuse/vueuse/issues/4023",0.7356619,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0RAVcT7RMNwH40vQOdnwi2H5-F0vL5xuJtxNXXBCE1k":-1},"/vueuse/vueuse/1912"]