` 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.71601427,{"description":3153,"labels":3154,"number":3155,"owner":3137,"repository":3147,"state":3139,"title":3156,"updated_at":3157,"url":3158,"score":3159},"Hi @Tahul ,\r\n\r\nYou asked for my experience with nuxt and this package. I tried to get it to work after the latest update, but it seems like it doesn't work. I have a sound in my public folder like this : public/sounds/back.wav\r\n\r\n\r\n\r\n`\u003Cscript setup>\r\nimport { useSound } from '@vueuse/sound'\r\n\r\nconst { play, sound } = useSound('/sounds/back.wav')\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cbutton @click=\"play \">\r\n test\r\n \u003C/button>\r\n\u003C/template>\r\n`\r\n\r\nThis is my test component\r\n\r\n` \r\n modules: ['@vueuse/sound/nuxt']\r\nsound: {\r\n sounds: {\r\n scan: true,\r\n },\r\n },`\r\n \r\n Did I have something wrong or do I need to change something to get it to work?\r\n \r\n Thanks in advance!",[],33,"Nuxt not working with sound","2023-08-31T13:56:56Z","https://github.com/vueuse/sound/issues/33",0.71883637,{"description":3161,"labels":3162,"number":3163,"owner":3137,"repository":3147,"state":3139,"title":3164,"updated_at":3165,"url":3166,"score":3167},"Following the installation instructions I get an error at startup:\r\n`[21:40:34] ERROR Cannot start nuxt: Cannot find module ./plugins/sounds imported from site_path/node_modules/@vueuse/sound/dist/runtime, site_path/node_modules/@vueuse/sound/dist/, site_path/node_modules/@vueuse/sound/dist/runtime/_index.js, \r\nsite_path/node_modules/@vueuse/sound/dist/node_modules`\r\n\r\n\r\nWhen trying to use via @vueuse/nuxt there is an error in the browser console:\r\n`index.mjs?v=ef472835:18 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Howl')\r\n at index.mjs?v=ef472835:18:44`",[],50,"Optimize for nuxt ^v3.14.0","2024-12-28T16:47:17Z","https://github.com/vueuse/sound/issues/50",0.7229297,{"description":3169,"labels":3170,"number":1473,"owner":3137,"repository":3147,"state":3139,"title":3171,"updated_at":3172,"url":3173,"score":3174},"Uncaught (in promise) TypeError: \r\n\r\n\r\n\r\nMy code:\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useSound } from \"@vueuse/sound\";\r\n\r\nconst { play } = useSound(\"pop.mp3\");\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n\u003Cbutton\r\n @click=\"play()\"\r\n>\r\n\u003C/template>\r\n\r\n```\r\n\r\nmy nuxt.config.ts:\r\n\r\n```\r\nexport default defineNuxtConfig({\r\n css: [\"@/assets/css/main.css\"],\r\n devtools: {\r\n enabled: true,\r\n },\r\n components: [{ path: \"@/components/home\", prefix: \"Home\" }, \"~/components\"],\r\n\r\n modules: [\r\n \"@vueuse/nuxt\",\r\n \"@vueuse/motion/nuxt\",\r\n \"@vueuse/sound/nuxt\",]\r\n\r\n sound: {\r\n scan: \"~/assets/sounds\",\r\n },\r\n\r\n runtimeConfig: {\r\n public: {\r\n baseURL: process.env.BASE_URL,\r\n },\r\n },\r\n\r\n app: {\r\n head: {\r\n link: [{ rel: \"icon\", type: \"image/png\", href: \"/logo.png\" }],\r\n },\r\n },\r\n});\r\n\r\n```\r\n\r\nMy package.json:\r\n\r\n```\r\n{\r\n \"name\": \"mob-website\",\r\n \"type\": \"module\",\r\n \"private\": true,\r\n \"scripts\": {\r\n \"build\": \"nuxt build\",\r\n \"dev\": \"nuxt dev\",\r\n \"generate\": \"nuxt generate\",\r\n \"preview\": \"nuxt preview\",\r\n \"postinstall\": \"nuxt prepare\",\r\n \"lint\": \"eslint .\",\r\n \"lint:fix\": \"eslint . --fix\"\r\n },\r\n \"dependencies\": {\r\n \"@formkit/icons\": \"^0.19.3\",\r\n \"@formkit/nuxt\": \"^0.19.3\",\r\n \"@formkit/themes\": \"^0.19.3\",\r\n \"@nuxt/image\": \"^1.0.0-rc.1\",\r\n \"@nuxtjs/eslint-module\": \"^4.1.0\",\r\n \"@pinia/nuxt\": \"^0.4.11\",\r\n \"@vee-validate/nuxt\": \"^4.11.2\",\r\n \"@vee-validate/yup\": \"^4.11.2\",\r\n \"@vueuse/motion\": \"^2.0.0\",\r\n \"@vueuse/sound\": \"^2.0.1\",\r\n \"eslint-plugin-tailwindcss\": \"^3.13.0\",\r\n \"flipbook-vue\": \"^1.0.0-beta.4\",\r\n \"nuxt-gtag\": \"^0.6.1\",\r\n \"nuxt-icon\": \"^0.5.0\",\r\n \"nuxt-storage\": \"^1.2.2\",\r\n \"nuxt-swiper\": \"^1.2.0\",\r\n \"nuxt-viewport\": \"^2.0.6\",\r\n \"vee-validate\": \"^4.11.2\",\r\n \"vue3-google-map\": \"^0.17.1\",\r\n \"yup\": \"^1.2.0\"\r\n },\r\n \"devDependencies\": {\r\n \"@nuxt/devtools\": \"^0.8.2\",\r\n \"@nuxt/eslint-config\": \"^0.1.1\",\r\n \"@nuxtjs/google-fonts\": \"^3.0.2\",\r\n \"@nuxtjs/i18n\": \"8.0.0-rc.3\",\r\n \"@types/node\": \"^18.17.3\",\r\n \"@types/qs\": \"^6.9.7\",\r\n \"@typescript-eslint/eslint-plugin\": \"^6.4.0\",\r\n \"@typescript-eslint/parser\": \"^6.4.0\",\r\n \"@vueuse/core\": \"^10.3.0\",\r\n \"@vueuse/nuxt\": \"^10.3.0\",\r\n \"autoprefixer\": \"^10.4.15\",\r\n \"eslint\": \"^8.47.0\",\r\n \"eslint-plugin-vue\": \"^9.17.0\",\r\n \"nuxt\": \"^3.6.5\",\r\n \"postcss\": \"^8.4.28\",\r\n \"tailwindcss\": \"^3.3.3\"\r\n },\r\n \"overrides\": {\r\n \"vue\": \"latest\"\r\n }\r\n}\r\n```\r\n\r\n",[],"howler.default is undefined","2024-09-07T19:03:28Z","https://github.com/vueuse/sound/issues/45",0.7244572,{"description":3176,"labels":3177,"number":3178,"owner":3137,"repository":3147,"state":3139,"title":3179,"updated_at":3180,"url":3181,"score":3182},"I just tried to use vueuse/sound in my Nuxt 3 project like so:\r\n```\r\nconst {play} = useSound(\"/sounds/alert.mp3\");\r\n```\r\n\r\nI am getting the following error:\r\n```\r\nUncaught (in promise) TypeError: HowlConstructor.value is not a constructor\r\n```\r\nwhich is [raised here](https://github.com/vueuse/sound/blob/3c4978bb07c3ef9638c0054e0e4a90923aca982c/src/index.ts#L29). \r\n\r\n`@vueuse/sound` version: 2.0.0\r\nThe `howler` version installed by my package manager is: 2.2.3. ",[],32,"TypeError: HowlConstructor.value is not a constructor","2023-07-06T12:32:02Z","https://github.com/vueuse/sound/issues/32",0.728931,{"description":3184,"labels":3185,"number":3189,"owner":3137,"repository":3137,"state":3139,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Describe the bug\n\nWhen using the `useInfiniteScroll` via the Nuxt integration (`@vueuse/nuxt`), if `canLoadMore` is initially `false `(e.g., due to a condition not being met on mount), and later becomes a valid function, infinite scrolling never triggers.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-wqevg5tx?file=app.vue\n\n### System Info\n\n```Shell\nSystem:\n OS: macOS 15.3.1\n CPU: (11) arm64 Apple M3 Pro\n Memory: 95.20 MB / 18.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Yarn: 1.22.21 - /usr/local/bin/yarn\n npm: 11.3.0 - ~/Library/Application Support/Herd/config/nvm/versions/node/v20.18.0/bin/npm\n pnpm: 10.10.0 - ~/Library/Application Support/Herd/config/nvm/versions/node/v20.18.0/bin/pnpm\n bun: 1.1.32 - ~/.bun/bin/bun\n Browsers:\n Chrome: 136.0.7103.114\n Safari: 18.3\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.",[3186],{"name":3187,"color":3188},"pending triage","d73a4a",4762,"BUG | `useInfiniteScoll` | does not work if `canLoadMore` is initially `false`","2025-05-20T16:09:26Z","https://github.com/vueuse/vueuse/issues/4762",0.74468243,{"description":3195,"labels":3196,"number":646,"owner":3137,"repository":3147,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},"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!",[],"closed","File-Loader","2021-01-04T02:00:51Z","https://github.com/vueuse/sound/issues/7",0.6339791,{"description":3203,"labels":3204,"number":3205,"owner":3137,"repository":3147,"state":3197,"title":3206,"updated_at":3207,"url":3208,"score":3209},"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.7019111,{"description":3211,"labels":3212,"number":3213,"owner":3137,"repository":3137,"state":3197,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### Describe the bug\n\n在谷歌浏览器 114.0.5735.133中,这样写是没有效果的,不会触发事件,const eventFun = () => {console.log('我没有触发')} ;document.addEventListener('fullscreenchange',eventFun),但是如果这样写是有效果的document.addEventListener('fullscreenchange',() => {console.log('我被触发')} ),所以useEventListener目前的用法无法触发事件,电脑是Mac\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-bx7yi9/?file=src%2FApp.vue,src%2Fmain.js\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 12.0.1\r\n CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 113.59 MB / 16.00 GB\r\n Shell: 5.8 - /bin/zsh\r\n Binaries:\r\n Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node\r\n Yarn: 1.22.18 - ~/.nvm/versions/node/v16.13.0/bin/yarn\r\n npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm\r\n Browsers:\r\n Chrome: 114.0.5735.133\r\n Safari: 15.1\r\n npmPackages:\r\n @vueuse/core: ^9.6.0 => 9.13.0 \r\n @vueuse/shared: ^9.6.0 => 9.13.0 \r\n vue: ^3.2.45 => 3.2.47\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.",[],3181,"useEventListener在谷歌浏览器不会触发","2023-09-25T03:29:55Z","https://github.com/vueuse/vueuse/issues/3181",0.71813047,["Reactive",3219],{},["Set"],["ShallowReactive",3222],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVUhibEmudQqaGDZz-I-U6nxSRd-MlD83-bbyitHGszY":-1},"/vueuse/sound/37"]