\r\n \u003Clink to=\"page-b\" />\r\n\u003C/page-a>\r\n```\r\n\r\n```vue\r\n\u003Cpage-b>\r\n \u003Cfullscreen-button />\r\n\u003C/page-b>\r\n```\r\n\r\n```vue\r\n\u003Cspan>{{ isFullscreen ? 'yes' : 'no }}\u003C/span>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n import { useFullscreen } from '@vueuse/core'\r\n const { isFullscreen, toggle } = useFullscreen()\r\n\u003C/script>\r\n```\r\n\r\nBug Reproduce:\r\n\r\n1. open page-a\r\n2. click fullscreen-button to enter fullscreen\r\n3. click link to page-b\r\n4. the fullscreen-button on page-b show “no” label\n\n### Reproduction\n\nhttps://github.com/Lionad-Morotar/vueuse-bug-134213\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 10 10.0.22623\r\n CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900H @ 2.50GHz\r\n Memory: 14.35 GB / 63.71 GB\r\n Binaries:\r\n Node: 16.19.0 - ~\\OneDrive\\Code\\NodeJS\\node.EXE\r\n Yarn: 1.22.19 - D:\\node-modules\\node_modules\\yarn.CMD\r\n npm: 9.4.0 - ~\\OneDrive\\Code\\NodeJS\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.22621.891.0), Chromium (111.0.1661.44)\r\n Internet Explorer: 11.0.22621.1\r\n npmPackages:\r\n @vueuse/core: 9.13.0 => 9.13.0\r\n vue: 3.2.45 => 3.2.45\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.",[],3006,"the initialization state of useFullScreen should follow document.fullscreenElement","2023-04-21T07:23:27Z","https://github.com/vueuse/vueuse/issues/3006",0.6867799,{"description":2887,"labels":2888,"number":2892,"owner":2856,"repository":2856,"state":2857,"title":2893,"updated_at":2894,"url":2895,"score":2896},"### Describe the bug\n\nI use useFullscreen to go fullscreen in the page, and when it's done (then) I use `vue-router` to go to an async component page. On this page, I have a button that changes based on the current fullscreen state, but the initial value of useFullscreen in the component is always false.\n\nI read the source code and found out that this method uses the `fullscreenchange` event to get the initialization value, but it will only trigger if the listening event and the entering full screen method are in the same event loop:\n```javascript\ndocument.documentElement\n .requestFullscreen()\n .then(() => Promise.resolve())\n .then(() => {\n document.addEventListener('fullscreenchange', () => console.log('It will be called!'));\n });\n```\nAnd it won't be called in this case, just like asynchronous component:\n```javascript\ndocument.documentElement.requestFullscreen().then(() => {\n setTimeout(() => {\n document.addEventListener('fullscreenchange', () => console.log('It WON‘T be called!'));\n });\n});\n```\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-o5ktenby?file=package.json\n\n### System Info\n\n```Shell\nSystem:\n OS: macOS 15.4.1\n CPU: (10) arm64 Apple M4\n Memory: 92.19 MB / 32.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 - ~/code/project/vueuse/node_modules/.bin/pnpm\n Browsers:\n Safari: 18.4\n npmPackages:\n @vueuse/core: workspace:* => 13.1.0\n @vueuse/integrations: workspace:* => 13.1.0\n @vueuse/math: workspace:* => 13.1.0\n @vueuse/metadata: workspace:* => 13.1.0\n @vueuse/nuxt: workspace:* => 13.1.0\n @vueuse/rxjs: workspace:* => 13.1.0\n @vueuse/shared: workspace:* => 13.1.0\n vue: catalog:dev => 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.",[2889],{"name":2890,"color":2891},"pending triage","d73a4a",4744,"BUG | `useFullscreen` | incorrect initial state in asynchronous component scenarios","2025-05-14T04:41:12Z","https://github.com/vueuse/vueuse/issues/4744",0.7069141,{"description":2898,"labels":2899,"number":2900,"owner":2856,"repository":2856,"state":2857,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Describe the bug\n\nUsing useFullscreen()'s toggle() will prompt a warning \"`Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.`\" and error \"`Uncaught (in promise) TypeError: fullscreen error at enter (index.mjs:2663:21) at async toggle (index.mjs:2671:7)`\" in the console\n\n### Reproduction\n\nhttps://codesandbox.io/s/flamboyant-diffie-d0u801?file=/src/App.vue\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 10 10.0.22000\r\n CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF\r\n Memory: 7.64 GB / 15.86 GB\r\n Binaries:\r\n Node: 16.15.1 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - C:\\Program Files\\nodejs\\yarn.CMD\r\n npm: 8.11.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.49)\r\n Internet Explorer: 11.0.22000.120\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.",[],1926,"Using useFullscreen() will prompt an error in the console","2022-07-16T15:34:48Z","https://github.com/vueuse/vueuse/issues/1926",0.70977366,{"description":2906,"labels":2907,"number":2908,"owner":2856,"repository":2856,"state":2857,"title":2909,"updated_at":2910,"url":2911,"score":2912},"I found that focusTrap isn't really what I wanted, so I put together a useFocusElement that is passed a ref to an element and returns a Ref\u003Cboolean> that indicates if the element has focus or not and can be set true to give focus to the element. \r\n\r\nIs this something that could become part of vueuse? \r\n\r\nHere is the code I have. I think if I put together a PR, I would change the target argument to a MaybeElementRef like useFocusTrap. \r\n\r\nWhen setting up the onBlur and onFocus event handlers, I first search the given element for some sort of input field because I am using a UI library that ends up wrapping the input fields in layers of divs. \r\n\r\n```JS\r\nimport { ref, Ref, watch } from '@vue/composition-api';\r\n\r\nexport interface UseFocusElementReturn {\r\n focus: Ref\u003Cboolean>;\r\n}\r\n\r\nexport function useFocusElement(target: Ref\u003Cany>): UseFocusElementReturn {\r\n const focus = ref(false);\r\n let input: undefined | HTMLElement;\r\n\r\n const focusTrue = () => {\r\n focus.value = true;\r\n };\r\n const focusFalse = () => {\r\n focus.value = false;\r\n };\r\n if ('value' in target) {\r\n // watch for changes in the target\r\n watch(\r\n () => target.value,\r\n (newTarget) => {\r\n if (input) {\r\n input.removeEventListener('blur', focusFalse);\r\n input.removeEventListener('focus', focusTrue);\r\n }\r\n if (newTarget && newTarget.$el) {\r\n input = newTarget.$el.querySelector('input, select, textarea');\r\n if (input) {\r\n input.addEventListener('blur', focusFalse);\r\n input.addEventListener('focus', focusTrue);\r\n }\r\n }\r\n },\r\n { immediate: true }\r\n );\r\n // watch for someone setting focus to true in order to focus the element\r\n watch(\r\n () => focus.value,\r\n (newValue, oldValue) => {\r\n if (newValue && !oldValue && input) {\r\n input.focus();\r\n }\r\n }\r\n );\r\n }\r\n return { focus };\r\n}\r\n```",[],763,"feature: useFocusElement","2022-09-21T19:27:56Z","https://github.com/vueuse/vueuse/issues/763",0.7125385,{"description":2914,"labels":2915,"number":2917,"owner":2856,"repository":2856,"state":2857,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Describe the bug\n\nwhen use F11 fullscreen, \n```\nconst { isFullscreen, toggle } = useFullscreen()\n```\n`isFullscreen` is not change \n\n### Reproduction\n\nconst { isFullscreen, toggle } = useFullscreen()\n\n### System Info\n\n```Shell\nSystem:\n OS: Windows 11 10.0.26100\n CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-13490F\n Memory: 12.76 GB / 31.84 GB\n Binaries:\n Node: 20.18.1 - C:\\Program Files\\nodejs\\node.EXE\n Yarn: 1.22.22 - C:\\Program Files\\nodejs\\yarn.CMD\n npm: 10.8.2 - C:\\Program Files\\nodejs\\npm.CMD\n pnpm: 10.4.1 - C:\\Program Files\\nodejs\\pnpm.CMD\n Browsers:\n Edge: Chromium (133.0.3065.92)\n Internet Explorer: 11.0.26100.1882\n npmPackages:\n @vueuse/core: ^12.7.0 => 12.7.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.",[2916],{"name":2890,"color":2891},4742,"BUG | `useFullscreen` | f11 the ref isFullscreen is not change","2025-05-29T12:47:57Z","https://github.com/vueuse/vueuse/issues/4742",0.7166586,{"description":2923,"labels":2924,"number":2925,"owner":2856,"repository":2856,"state":2857,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Describe the bug\n\nUsing multiple useFullscreen in one page will cause conflicts and fail to work properly, and the specified elements will not take effect.\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/wild-wave-rszrvk?file=%2Fsrc%2FApp.vue\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 13.3\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 13.72 GB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\nBinaries:\r\n Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node\r\n Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn\r\n npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm\r\nBrowsers:\r\n Chrome: 112.0.5615.49\r\n Safari: 16.4\r\nnpmPackages:\r\n @vueuse/core: ^9.3.0 => 9.7.0 \r\n vue: ^3.2.40 => 3.2.45\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.",[],2962,"multiple useFullscreen in one page fail to work properly, and the specified elements will not take effect","2023-06-23T08:51:40Z","https://github.com/vueuse/vueuse/issues/2962",0.7203203,{"description":2931,"labels":2932,"number":2933,"owner":2856,"repository":2856,"state":2857,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Describe the bug\n\n\r\n\n\n### Reproduction\n\n123\n\n### System Info\n\n```Shell\nSystem:\r\n OS: Windows 10 10.0.19041\r\n CPU: (4) x64 Intel(R) Core(TM) i3-6006U CPU @ 2.00GHz\r\n Memory: 18.73 GB / 31.46 GB\r\n Binaries:\r\n Node: 16.13.1 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 8.1.2 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Spartan (44.19041.1.0)\r\n Internet Explorer: 11.0.19041.1\r\n npmPackages:\r\n vue: ^3.2.37 => 3.2.40\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.",[],2322,"multiple useFullscreen do not work properly,Fullscreen specified element is bad","2022-10-14T06:03:07Z","https://github.com/vueuse/vueuse/issues/2322",0.7234838,["Reactive",2939],{},["Set"],["ShallowReactive",2942],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFWXmKIjmoWoHavVaGboJWiAucJYIJ2wfo4hxFzvpN4o":-1},"/vueuse/vueuse/4346"]