` 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",[],"TypeError: Cannot read properties of undefined (reading 'version')","2022-11-25T02:10:33Z","https://github.com/vueuse/sound/issues/17",0.7182259,{"description":3169,"labels":3170,"number":3174,"owner":3138,"repository":3138,"state":3140,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Describe the bug\r\n\r\nWhen calling `until` on a ref of an array, _e.g._ `until(ref([]))`, the response does not include \"all the methods\". It is of type `UntilArrayInstance`.\r\n\r\nBut when I use `until` on a ref that may be `undefined`, something weird is happing. In any cases, the return type is `UntilValueInstance`, but at *runtime*:\r\n1) If the ref is initialized with undefined, _e.g._ `until(ref\u003Cstring[]>())`, then the returned value corresponds to the type as expected\r\n2) If the ref is initialized with any array, _e.g._ `until(ref\u003Cstring[]>([]))` then the returned value corresponsed to `UntilArrayInstance` interface\r\n\r\nIs it by design ? This makes really difficult to rely on TS to handle the different possible cases. (It is possible that I have a computed which initial value is not known at the setup of the component, because coming from a store or things like that).\r\n\r\nFor instance, my code was throwing because I was relying on the inferred return type `UntilValueInstance` but the runtime returned object did not include the desired methods.\r\n\r\n\r\n### Reproduction\r\n\r\n[reproduction link](https://play.vueuse.org/#N4IgDghgxg1hDmBTAziAXAbVAOwgW0XRADcBXRAWgBNE8BLEAGhGQHtSAnKQtEU7MDHhMQNZFA50wAFzqtsRAGrkABABFadFQAoAFhAA2AMxV1sKgGIdE2KLoCUp5CogqaxRAdZgz8FaVkDOmkATxcDLwB3ZxD2FWlWFUjJaUQVAFVsOg8OZEMVZTSAGToAIw4ISRQVI1YOAtUAJhUAMhUAZhFOAyJdaWkwZDQAemH+QXgAOihWPGGyShp6YaDS4bMaAA9JvAArVABfRhx8HhAAAQXSZERh5H1rKhE2Tm4icaERMQkpWXkiADKD0QVAaiHSN38gWCdBQky6HB6vD6AyGow+Uxmc0u5Gut3ulRB5wAjAAGSbEyak9bYLY7fYgI4nAhEHGIPHDGbWZ7sLhnDFfFA-GRyBS8ADCrAiiCgf3MrBMKBu2Fk+UKKkleDArGQMPkGWhshQCKRIBRgxGYwEQmms2GbI5XMQJPJlOpG0Q2z2hwAuswjHQDMa0KAAIJgMCTBboUCpLUGCCpIjPYXSIh0LV1aQqYD+FWBlQHGocWYqADkDpunLqiDLAB0spmONnc1iwAEQYXi6WywsywBuBsN0YuZDIUgEeL6bPSXRpMww-LEQyqAAGGB9q5UWOqRhLeBcKmQCWsKlKAW3EGw2FY2dKaRgN8i5ivoJmpAMoPveZoAewIIbGZsGPFRlwMFQAF5t1mdtUiobRtEcCCAD4VA3ewh1wZAQlsGp+FlUV4hQaREJzBsVBcSIIGCPNAm0MD7EmG9pEmBIACFwVpRA-xBRDB2wA5MNSY8+MZZhJTqKgzETRAo3IGMQDjMAEyTXgAB4pOIciankaQILrEA8HkVgDO00p4H0kAgngPoKAAVlJUk3EqGA0CoFz7Mc0zzBqINNksgA-aCDG8ijUk2PSDO4FVEA4UKVDASzGni0pJNiyyS34GgqG85DtLU5BIHMcLIpAAAWTYQpAZDgFzMDVAOA41LuIq8p8gqiqIiLLOQA93I4VzrNsgBORznIGtBvGgYIQk8gyVDwSzpAoZLqoAWXYSFapUBN73AxrmsKq82uazTkJTSQZCIX8zEQAAFEtBm0YBtN2zw0BUAFpEkbB4EYbT6sQD6ADkJ3vDh-oE+xGUaoA)\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: macOS 14.1.1\r\n CPU: (11) arm64 Apple M3 Pro\r\n Memory: 154.41 MB / 36.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node\r\n Yarn: 3.6.3 - ~/.nvm/versions/node/v18.18.2/bin/yarn\r\n npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm\r\n Browsers:\r\n Chrome: 119.0.6045.123\r\n Safari: 17.1\r\n npmPackages:\r\n @vueuse/core: ^10.7.2 => 10.7.2\r\n vue: ^2.7.15 => 2.7.14\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nyarn\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.",[3171],{"name":3172,"color":3173},"enhancement","a2eeef",3740,"Missing methods on `until` called on a maybe undefined array ref whilst listed by TS","2025-02-28T16:13:22Z","https://github.com/vueuse/vueuse/issues/3740",0.7220543,{"description":3180,"labels":3181,"number":3182,"owner":3138,"repository":3139,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},"Thank you to share this amazing project. But I got some problems with setup on my vue2 project.\r\n\r\n\r\nERROR in /Users/---/Developer/**/node_modules/@vueuse/sound/dist/esm/src/types.d.ts\r\n1:35 Could not find a declaration file for module 'howler'. '/Users/---/Developer/---/node_modules/howler/dist/howler.js' implicitly has an 'any' type.\r\n Try `npm install @types/howler` if it exists or add a new declaration (.d.ts) file containing `declare module 'howler';`\r\n > 1 | import { Howl, HowlOptions } from 'howler';\r\n | ^\r\n 2 | import { ComputedRef, Ref } from 'vue-demi';\r\n 3 | export interface HowlStatic {\r\n 4 | new (properties: HowlOptions): Howl;\r\nNo lint errors found",[],14,"closed","error in vue2 with typescript","2024-01-16T10:14:01Z","https://github.com/vueuse/sound/issues/14",0.6650017,{"description":3189,"labels":3190,"number":3191,"owner":3138,"repository":3139,"state":3183,"title":3192,"updated_at":3193,"url":3194,"score":3195},"I have the following compilation error when running `npm run build` in a fresh Vue app:\r\n\r\n```\r\nsrc/App.vue:21:26 - error TS7016: Could not find a declaration file for module '@vueuse/sound'. 'C:/[...redacted...]/node_modules/@vueuse/sound/dist/index.mjs' implicitly has an 'any' type.\r\n There are types at 'C:/[...redacted...]/node_modules/@vueuse/sound/dist/index.d.ts', but this result could not be resolved when respecting package.json \"exports\". The '@vueuse/sound' library may need to update its package.json or typings.\r\n\r\n21 import { useSound } from '@vueuse/sound';\r\n ~~~~~~~~~~~~~~~\r\n\r\n\r\nFound 1 error in src/App.vue:21\r\n\r\nERROR: \"type-check\" exited with 2.\r\n```\r\n\r\nThe error goes away if I manually delete the `exports` key in `package.json`:\r\n\r\n```json\r\n \"exports\": {\r\n \".\": {\r\n \"require\": \"./dist/index.cjs\",\r\n \"import\": \"./dist/index.mjs\"\r\n },\r\n \"./nuxt\": {\r\n \"require\": \"./dist/nuxt.cjs\",\r\n \"import\": \"./dist/nuxt.mjs\"\r\n }\r\n },\r\n```\r\n\r\nDo you have any clue to solve it?",[],42,"Could not find a declaration file for module '@vueuse/sound'","2024-12-28T16:04:51Z","https://github.com/vueuse/sound/issues/42",0.6985613,{"description":3197,"labels":3198,"number":646,"owner":3138,"repository":3139,"state":3183,"title":3199,"updated_at":3200,"url":3201,"score":3202},"This isn't strictly speaking an issue with the package, I'm just really struggling here, and I could imagine others too!\r\n\r\nI'm currently not as experienced as I probably should be with anything regarding webpack/babel etc. Therefore, I have no Idea how to fix following issue\r\n\r\n```\r\nModule parse failed: Unexpected token (34:28)\r\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders\r\n| };\r\n| watch(() => [url], () => {\r\n> if (HowlConstructor?.value && sound?.value) {\r\n| sound.value = new HowlConstructor.value({\r\n| src: [url],\r\n\r\n @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 3:0-37 14:12-20\r\n @ ./src/App.vue?vue&type=script&lang=js\r\n @ ./src/App.vue\r\n @ ./src/main.js\r\n @ multi (webpack)-dev-server/client?http://192.168.178.20:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js\r\n```\r\n\r\nI've tried installing the webpack file-loader, but that failed since I don't think I use Webpack but Babel in Vue 3. (Also my first Vue 3 project, I've only worked in Vue 2 before)\r\n\r\nI've tried `babel-plugin-file-loader` with this configuration (basically the standard one with mp3 added as extensions)\r\n\r\n```\r\n\"plugins\": [\r\n [\r\n \"file-loader\",\r\n {\r\n \"name\": \"[hash].[ext]\",\r\n \"extensions\": [\"png\", \"jpg\", \"jpeg\", \"gif\", \"svg\", \"mp3\"],\r\n \"publicPath\": \"/public\",\r\n \"outputPath\": \"/public\",\r\n \"context\": \"/src\",\r\n \"limit\": 0\r\n }\r\n ]\r\n ]\r\n```\r\n\r\nBut the error still occurs. I'm honestly just really lost with this whole loader thing, if you could include an example loader-config or something like that when you have time, that'd be awesome!",[],"File-Loader","2021-01-04T02:00:51Z","https://github.com/vueuse/sound/issues/7",0.6991355,{"description":3204,"labels":3205,"number":3206,"owner":3138,"repository":3138,"state":3183,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Describe the bug\n\nHello, sorry to bother you but it's been 5 days that I can't use the renderless components with Nuxt3. Maybe I'm missing something obvious and I apologize in advance.\r\n\r\nHere is the minimal example : \r\n ```\r\n\u003Cscript>\r\nimport { UseMouse } from '@vueuse/components';\r\n\r\nexport default {\r\n name: 'composant',\r\n\r\n setup() {\r\n return { UseMouse };\r\n },\r\n};\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n Hello\r\n \u003CUseMouse v-slot=\"{ x, y }\"> x: {{ x }} y: {{ y }} \u003C/UseMouse>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\u003C/style>\r\n\r\n```\r\nwhich gives the following error : `Vue warn]: Failed to resolve component: UseMouse\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.`\r\n\r\nAlthough I manage to access UseMouse with @vueuse/core's basic usage \r\n\r\nThank you for your help\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-8zqjsy?file=app.vue\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 12.3.1\r\n CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz\r\n Memory: 77.89 MB / 8.00 GB\r\n Shell: 5.8 - /bin/zsh\r\n Binaries:\r\n Node: 16.15.0 - /usr/local/bin/node\r\n npm: 8.5.5 - /usr/local/bin/npm\r\n Browsers:\r\n Brave Browser: 96.1.32.106\r\n Chrome: 101.0.4951.64\r\n Safari: 15.4\r\n npmPackages:\r\n @vueuse/components: ^8.5.0 => 8.5.0 \r\n @vueuse/core: ^8.5.0 => 8.5.0 \r\n @vueuse/nuxt: ^8.5.0 => 8.5.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.",[],1653,"Impossible to resolve component from @vueuse/components in Nuxt3","2022-06-02T07:26:35Z","https://github.com/vueuse/vueuse/issues/1653",0.70009565,{"description":3212,"labels":3213,"number":3214,"owner":3138,"repository":3138,"state":3183,"title":3215,"updated_at":3216,"url":3217,"score":3218},"Following the installation advise here: https://vueuse.org/guide/#nuxt \r\n\r\nIs there anything else we need to do to get this working within a Typescript setup?\r\n\r\nI have a very minimal Nuxt 3 starter, with just Windi.css and @vueuse/nuxt as the build modules - and I see this error:\r\n\r\n\u003Cimg width=\"1050\" alt=\"Screenshot 2021-12-29 at 21 18 41\" src=\"https://user-images.githubusercontent.com/84131395/147704152-ed2ba28c-919e-4d42-9a00-7c90e3ba7cfe.png\">\r\n\r\nWithout calling useMouse():\r\n\r\n\u003Cimg width=\"1051\" alt=\"Screenshot 2021-12-29 at 21 18 08\" src=\"https://user-images.githubusercontent.com/84131395/147704173-f04ce38d-ba1f-4874-b607-4af4a34b9abe.png\">\r\n\r\nExample of code:\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003CNavigation/>\r\n \u003Cmain ref=\"main\" class=\"text-blue-800 min-h-screen\">\r\n \u003Cslot />\r\n \u003C/main>\r\n \u003CBrandsWeLove />\r\n \u003CFooter/>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nexport default defineComponent({\r\n setup () {\r\n const main = ref()\r\n\r\n const { x, y } = useMouse()\r\n\r\n return {\r\n main\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n```\r\n\r\n\u003Cimg width=\"1680\" alt=\"Screenshot 2021-12-29 at 21 18 50\" src=\"https://user-images.githubusercontent.com/84131395/147704185-b6a0ef92-6974-42ee-97ad-bcb73534b40a.png\">\r\n\r\nAny suggestions as to why the auto-import isn't working?\r\n\r\nOutput of running `npx nuxi info`:\r\n\r\n```\r\nNuxt CLI v3.0.0-27338323.1e98259 21:21:54\r\nRootDir: /Users/michael/kindandconscioius/kindandconscious-shopify 21:21:55\r\nNuxt project info: 21:21:55\r\n\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.13.0`\r\n- Nuxt Version: `3.0.0-27338323.1e98259`\r\n- Package Manager: `npm@8.1.0`\r\n- Bundler: `Vite`\r\n- User Config: `buildModules`, `components`, `css`\r\n- Runtime Modules: `-`\r\n- Build Modules: `nuxt-windicss@2.2.1`, `@vueuse/nuxt@7.4.1`\r\n------------------------------\r\n```",[],1115,"@vueuse/nuxt - Nuxt 3 Installation Issue?","2022-03-08T10:36:08Z","https://github.com/vueuse/vueuse/issues/1115",0.71202207,["Reactive",3220],{},["Set"],["ShallowReactive",3223],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPTrCr7yqgsK_PzlCva5tqEOQRcsxISE75eL_32HVHus":-1},"/vueuse/sound/45"]