\r\n | ^\r\n 2 | import { Ref, WatchStopHandle, ComputedRef, WatchOptions } from 'vue-demi';\r\n 3 | import { Ref as Ref$1, UnwrapRef, WatchStopHandle as WatchStopHandle$1, ComputedRef as ComputedRef$1 } from 'vue-demi';\r\n 4 | export * from '@vueuse/shared';\r\nERROR in .../node_modules/@vueuse/core/dist/index.d.ts(377,87):\r\n377:87 Cannot find name 'ResizeObserverCallback'.\r\n 375 | declare function useRefHistory\u003CRaw, Serialized = Raw>(current: Ref\u003CRaw>, options?: UseRefHistoryOptions\u003CRaw, Serialized>): UseRefHistoryReturn\u003CRaw, Serialized>;\r\n 376 | \r\n > 377 | declare function useResizeObserver(el: Ref\u003CHTMLElement | null | undefined>, callback: ResizeObserverCallback): {\r\n | ^\r\n 378 | stop: WatchStopHandle$1;\r\n 379 | };\r\n 380 | \r\nVersion: typescript 4.0.3\r\n```",[],154,"vueuse","closed","Typescript error on ResizeObserver","2020-11-03T06:27:49Z","https://github.com/vueuse/vueuse/issues/154",0.73153305,{"description":2860,"labels":2861,"number":2862,"owner":2853,"repository":2853,"state":2854,"title":2863,"updated_at":2864,"url":2865,"score":2866},"### Describe the bug\r\n\r\nAfter upgrading to version 10 of `@vueue/components`, builds of our vue3 vite app fail because Rollup cannot find the `@vue/reactivity` import in `@vueuse/components/index.mjs`\r\n\r\nThis bug appears to have been introduced via https://github.com/vueuse/vueuse/commit/f87f87741d436825b6a72ea2ab44c056922104d8 which adds the import on `@vue/reactivity` without declaring it as a peer dependency.\r\n\r\n\u003Cdetails>\u003Csummary>Error log\u003C/summary>\r\n\r\n```\r\n[vite]: Rollup failed to resolve import \"@vue/reactivity\" from \"[system path]/node_modules/@vueuse/components/index.mjs\".\r\nThis is most likely unintended because it can break your application at runtime.\r\nIf you do want to externalize this module explicitly add it to\r\n`build.rollupOptions.external`\r\nerror during build:\r\nError: [vite]: Rollup failed to resolve import \"@vue/reactivity\" from \"[system path]/node_modules/@vueuse/components/index.mjs\".\r\nThis is most likely unintended because it can break your application at runtime.\r\nIf you do want to externalize this module explicitly add it to\r\n`build.rollupOptions.external`\r\n at onRollupWarning (file:///[system path]/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19)\r\n at onwarn (file:///[system path]/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13)\r\n at Object.onwarn (file:///[system path]/node_modules/rollup/dist/es/shared/node-entry.js:25149:13)\r\n at ModuleLoader.handleInvalidResolvedId (file:///[system path]/node_modules/rollup/dist/es/shared/node-entry.js:23784:26)\r\n at file:///[system path]node_modules/rollup/dist/es/shared/node-entry.js:23744:26\r\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\r\n```\r\n\u003C/details>\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/wopian/vueuse-repro2\r\n\r\n#### Reproduction Steps\r\n\r\n1. Have Yarn installed on system\r\n2. Run `yarn` to install dependencies with Yarn 3.5.0\r\n3. Run `yarn build` to build the Vite 4 app\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: macOS 13.3\r\n CPU: (8) arm64 Apple M1\r\n Memory: 99.84 MB / 8.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 19.9.0 - /opt/homebrew/bin/node\r\n Yarn: 3.5.0 - /opt/homebrew/bin/yarn\r\n npm: 9.6.3 - /opt/homebrew/bin/npm\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.",[],2972,"Rollup fails to resolve @vue/reactivity with @vueuse/components v10","2024-07-03T22:56:51Z","https://github.com/vueuse/vueuse/issues/2972",0.73665655,{"description":2868,"labels":2869,"number":2870,"owner":2853,"repository":2853,"state":2854,"title":2871,"updated_at":2872,"url":2873,"score":2874},"### Describe the bug\r\n\r\nI am trying to use the useLocalStorage composable in a Pinia store, but I get a typescript error out of it.\r\nThis is the store.\r\n\u003Cimg width=\"329\" alt=\"Screenshot 2022-06-06 at 11 34 30\" src=\"https://user-images.githubusercontent.com/47953165/172126379-913d6d0b-3dac-4ea7-9baa-6415a319d2de.png\">\r\n\r\nAnd this is the error that I am geeting.\r\n\u003Cimg width=\"889\" alt=\"Screenshot 2022-06-06 at 11 35 38\" src=\"https://user-images.githubusercontent.com/47953165/172126702-988a3c9f-85f8-4f5f-870a-e37cb14cfdfe.png\">\r\n\r\nIf I type the state, the error goes away, but the thing is, if I remove useLocalStorage and have a normal state object, the error does not show up.\r\n\r\nI could not reproduce this on a fresh repo so I have linked the repo where I have encountered the error. If you clone and run npm install then you install the required extensions so that vs code will understand the code, you will see in the stores folder to ts files that have that error. If I use removable ref to type each variable, the errors goes await, but it doesnt make sense to me to be this way.\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/genuineq/template-frontend\r\n\r\n### System Info\r\n\r\n```Shell\r\nSystem:\r\n OS: macOS 12.4\r\n CPU: (8) arm64 Apple M1\r\n Memory: 1.04 GB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node\r\n Yarn: 1.22.17 - /opt/homebrew/bin/yarn\r\n npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm\r\n Browsers:\r\n Chrome: 102.0.5005.61\r\n Firefox: 100.0.2\r\n Safari: 15.5\r\n npmPackages:\r\n @vueuse/core: ^8.2.5 => 8.2.5 \r\n @vueuse/integrations: ^8.2.5 => 8.2.5 \r\n vue: ^3.2.31 => 3.2.31\r\n```\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.",[],1667,"Bug using useLocalStorage in pinia store","2022-09-23T19:23:55Z","https://github.com/vueuse/vueuse/issues/1667",0.7367554,{"description":2876,"labels":2877,"number":2881,"owner":2853,"repository":2853,"state":2854,"title":2882,"updated_at":2883,"url":2884,"score":2885},"### Clear and concise description of the problem\r\n\r\nIn an image-focused application site, one page may require multiple images to be preloaded for the complete user experience.\r\n\r\n### Suggested solution\r\n\r\nI found that VueUse has a hook called `useImage`.\r\nIt only works for a single image, although we can wrap it around a `promise.all` + `for` loop.\r\nBut, I think it would be more convenient to provide a hook of `useImages` directly.\r\n\r\nIf you think this is useful, I'd be happy to create a PR for it.\r\n\r\nHere's what I'm looking for:\r\n\r\n```ts\r\nconst { isLoading, images } = useImages({ collection: ['https://xxx', 'https://yyy'] })\r\n// isLoading means all assets are loaded\r\n// images[0].isLoading\r\n\r\nconst { isLoading, images } = useImages({ collection: [\r\n { id: 'xxx', src: 'https://xxx' }, { id: 'yyy', src: 'https://yyy' }\r\n]})\r\n// images['xxx'].isLoading\r\n```\r\n\r\nDo you have any better suggestions?\r\n\r\n### Alternative\r\n\r\nI have another idea.\r\n`@vueuse/loader`: VueUse for [resource-loader](https://github.com/englercj/resource-loader), to wrap the load of resources.\r\n\r\n> resource-loader hasn't been updated in a long time and I'm not sure if I should rely on it.\r\n\r\nI'm not sure if this idea is worth doing, please let me know if you have any suggestions.\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[2878],{"name":2879,"color":2880},"enhancement","a2eeef",2488,"useImages or useResourceLoader","2023-02-05T16:34:48Z","https://github.com/vueuse/vueuse/issues/2488",0.7381227,{"description":2887,"labels":2888,"number":2889,"owner":2853,"repository":2853,"state":2854,"title":2890,"updated_at":2891,"url":2892,"score":2893},"I'm proposing a new function called `useFetch`. I think maybe the API could be similar to `useAxios` but for `fetch` since people may not want to add Axios to their project.\r\n\r\nI'm thinking something like this\r\n\r\n```ts\r\nconst { finished, response, error, data } = useFetch('http://example.com', { options })\r\n```\r\n\r\nI imagine it will return something like this\r\n```ts\r\nexport interface FetchOptions {\r\n // Indicates if the fetch request has completed\r\n finished: boolean\r\n\r\n // The raw response from request\r\n response: Response | null\r\n\r\n // The error if there was one during the request\r\n error: any\r\n\r\n // Either the JSON or Text response of the request\r\n data: object | string\r\n}\r\n```\r\n\r\nI've started implementing this in a personal project but thought it might fit well here.\r\n\r\nSome of the features I'd like to include are the following:\r\n\r\n- **Using an Object for headers**\r\n This would only make a slight adjustment to the current fetch options. Basically it would allow the user to pass in the normal options for headers as well as an object that would automatically be converted to a Headers object. Although perhaps you'd like us to avoid changing the default options, let me know what you think is best if you like this proposal.\r\n\r\n```ts\r\nexport interface FetchConfig extends Omit\u003CRequestInit, 'headers'> {\r\n headers: HeadersInit | ObjectHeaders\r\n}\r\n```\r\n\r\n- **Returning either json or text in the data object**\r\n Typically when using fetch you will have to do something like `fetch().then(response => response.json()).then(json => ...)` but this function would read the `content-type` headers and automatically assign the `data` ref to what the response is, either text or json\r\n\r\nAnyway let me know what you think of this feature. If you like it I'd be happy to make a PR. Thanks 😄 ",[],327,"Function Proposal: useFetch","2021-02-23T03:59:57Z","https://github.com/vueuse/vueuse/issues/327",0.7387258,{"description":2895,"labels":2896,"number":2897,"owner":2853,"repository":2853,"state":2854,"title":2898,"updated_at":2899,"url":2900,"score":2901},"### Describe the bug\n\nThe `beforeFetch` hook's context does not contain `headers` object, and therefore, one is forced to check for its presence.\r\n\r\nFor example, following code from the docs throws an error because we are trying to set `Authorization` property on an undefined `options.headers` object:\r\n```typescript\r\nconst useMyFetch = createFetch({\r\n baseUrl: 'https://my-api.com',\r\n options: {\r\n async beforeFetch({ options }) {\r\n const myToken = await getMyToken()\r\n options.headers.Authorization = `Bearer ${myToken}`\r\n\r\n return { options }\r\n },\r\n },\r\n fetchOptions: {\r\n mode: 'cors',\r\n },\r\n})\r\n\r\nconst { isFetching, error, data } = useMyFetch('users')\r\n```\r\n\r\nThe following code works:\r\n```typescript\r\nconst useMyFetch = createFetch({\r\n baseUrl: 'https://my-api.com',\r\n options: {\r\n async beforeFetch({ options }) {\r\n const myToken = await getMyToken()\r\n if (!('headers' in options)) {\r\n options.headers = {}\r\n }\r\n options.headers.Authorization = `Bearer ${myToken}`\r\n\r\n return { options }\r\n },\r\n },\r\n fetchOptions: {\r\n mode: 'cors',\r\n },\r\n})\r\n\r\nconst { isFetching, error, data } = useMyFetch('users')\r\n```\r\n\r\nThe code above works but it does not feel right to initialize library's object instances.\r\nI think that [initialization of the beforeFetch context](https://github.com/vueuse/vueuse/blob/50de864cbe412c24279e1ee6b52cc4ed335c80ab/packages/core/useFetch/index.ts#L352) could use the existing [defaultFetchOptions](https://github.com/vueuse/vueuse/blob/50de864cbe412c24279e1ee6b52cc4ed335c80ab/packages/core/useFetch/index.ts#L338) object, which already contains an empty `headers` object.\r\n\r\nFor example:\r\n```typescript\r\nconst context: BeforeFetchContext = { url: unref(url), options: {...defaultFetchOptions, ...fetchOptions}, cancel: () => { isCanceled = true } }\r\n```\r\nIf this code was used, then the initialization of fetch object would not need [to spread `defaultFetchOptions` object](https://github.com/vueuse/vueuse/blob/50de864cbe412c24279e1ee6b52cc4ed335c80ab/packages/core/useFetch/index.ts#L371) anymore.\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-e2xqwr/?file=src%2FApp.vue\n\n### System Info\n\n```Shell\nnpmPackages:\r\n @vueuse/core: ^8.2.6 => 8.2.6 \r\n vue: ^3.2.29 => 3.2.31\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.",[],1495,"useFetch: headers object missing in BeforeFetch context","2023-08-04T12:30:46Z","https://github.com/vueuse/vueuse/issues/1495",0.74148214,{"description":2903,"labels":2904,"number":2908,"owner":2853,"repository":2853,"state":2854,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### 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.",[2905],{"name":2906,"color":2907},"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.74332327,{"description":2914,"labels":2915,"number":2916,"owner":2853,"repository":2853,"state":2854,"title":2917,"updated_at":2918,"url":2919,"score":2920},"I personally make use of heavy TypeScript by using the eslint rule [typedef](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/typedef.md)\r\n\r\nSo we could add a return type and export these explicitly for every function.\r\nWe also don't need to type them safly but just create somewhat aliases.\r\n\r\nWe can do that like so\r\n\r\n```ts\r\nexport function useMouse(options: MouseOptions = {}) { /*...*/ }\r\n\r\nexport type UseMouse = ReturnType\u003Ctypeof useMouse>\r\n```\r\n\r\nAre you open for such an addition?\r\n\r\n---\r\n\r\nCurrently I'm forced to define these myself: https://github.com/Shinigami92/vizscript/blob/c3d26fd3f921787dab0bf25cb9d024d170824225/src/views/Viz.vue#L55-L56",[],543,"Add return types for all composables","2021-05-30T03:29:06Z","https://github.com/vueuse/vueuse/issues/543",0.7451156,{"description":2922,"labels":2923,"number":2924,"owner":2853,"repository":2925,"state":2854,"title":2926,"updated_at":2927,"url":2928,"score":2929},"Maybe we can do some code refactoring of `vue-demi` with typescript for better code organization ?\r\n\r\nIf needed, I would be glad to do the improvement.",[],255,"vue-demi","Refactor with typescript ?","2024-03-03T09:45:23Z","https://github.com/vueuse/vue-demi/issues/255",0.74598634,{"description":2931,"labels":2932,"number":2933,"owner":2853,"repository":2853,"state":2854,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Describe the bug\n\nWhen using `until` with a timeout, the typing incorrectly is narrowed down to the until condition.\r\n\r\nWithout timeout, the type is correctly narrowed down to the `toBeNull` condition.\r\n\r\n\u003Cimg width=\"454\" alt=\"image\" src=\"https://user-images.githubusercontent.com/22987140/220575142-0dc2a284-e147-43cd-afa3-36080580ff28.png\">\r\n\r\nbut when a timeout is added, that timeout could also resolve the promise, which means the condition does not need to be matching yet.\r\nSo in the following example, the return type is wrongly narrowed to `null`.\r\n\u003Cimg width=\"623\" alt=\"image\" src=\"https://user-images.githubusercontent.com/22987140/220575282-cf79f37b-24d6-4a14-8870-31289f2bdc3b.png\">\r\nWhen using `throwOnTimeout: true`, it would be correct again, though.\r\n\r\nHere's also a small excerpt from a real-life use-case we have (although I had to leave out the calculation of the computed)\r\n\r\n\u003Cimg width=\"982\" alt=\"image\" src=\"https://user-images.githubusercontent.com/22987140/220574551-6c2c169f-d58b-449e-9e15-4fc54e6d747d.png\">\r\n\r\nIt's kind of the opposite issue described in: https://github.com/vueuse/vueuse/issues/1492\r\n\n\n### Reproduction\n\nsee bug description screenshots\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 13.2.1\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 1.25 GB / 32.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 18.14.0 - /opt/homebrew/opt/node@18/bin/node\r\n npm: 9.3.1 - /opt/homebrew/opt/node@18/bin/npm\r\n npmPackages:\r\n @vueuse/core: ^9.3.0 => 9.3.0 \r\n vue: ^2.7.10 => 2.7.10\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.",[],2804,"Incorrect return type of until when used with timeout","2023-05-18T09:27:36Z","https://github.com/vueuse/vueuse/issues/2804",0.7462681,["Reactive",2939],{},["Set"],["ShallowReactive",2942],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjW3n6Uf3LVIrfeKPyBakgamyczspGFhhyoqNV8iyPf4":-1},"/vueuse/playground/19"]