\r\n ...\r\n````\r\n\r\nAdd some page with some async load time so to have the loading indicator show between route change.\n\n### Describe the bug\n\nThe browser view transition diffing makes the NuxtLoadingIndicator invisible up until the page is fully loaded when it shortly flashes to a 100%. If I remove the `viewTransition: true` it works as expected again.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2884,2887,2888],{"name":2885,"color":2886},"good first issue","fbca04",{"name":2870,"color":2871},{"name":2889,"color":2890},"🔨 p3-minor","FBCA04",21280,"NuxtLoadingIndicator is broken when using together with experimental.viewTransitions ","2024-11-19T16:20:26Z","https://github.com/nuxt/nuxt/issues/21280",0.7368361,{"description":2897,"labels":2898,"number":2901,"owner":2859,"repository":2860,"state":2902,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.6\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-agnesi-drlrh4?file=%2Fapp%2Fpages%2Findex.vue%3A24%2C24\n\n### Description\n\nWhen I close a `UDrawer` that I opened via an action from a `UDropdownMenu`, the style on my \u003Cbody> tag still contains `overflow: hidden` and `user-select: none`, which prevents interaction with the page.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2899,2900],{"name":2870,"color":2871},{"name":2856,"color":2857},3406,"closed","User interaction lock after a Drawer/DropdownMenu","2025-02-27T20:57:27Z","https://github.com/nuxt/ui/issues/3406",0.68010134,{"labels":2908,"number":2915,"owner":2859,"repository":2859,"state":2902,"title":2916,"updated_at":2917,"url":2918,"score":2919},[2909,2912],{"name":2910,"color":2911},"pending triage","E99695",{"name":2913,"color":2914},"2.x","d4c5f9",5456,"Slide-enter animations are broken although slide-leave are working well","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5456",0.7018684,{"description":2921,"labels":2922,"number":2926,"owner":2859,"repository":2860,"state":2902,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.10.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: nitro, build, compatibilityDate, devtools, ssr, css, modules, i18n\n- Runtime Modules: @nuxt/ui@3.1.0, @nuxt/test-utils@3.17.2, @nuxt/image@1.10.0, @nuxt/icon@1.12.0, @nuxt/fonts@0.11.2, @nuxt/eslint@1.3.0, @nuxtjs/i18n@9.5.3, @nuxtjs/leaflet@1.2.6, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/fancy-river-42j5xw?workspaceId=ws_GgeGxunRZmD7bdWXHYL2Xk\n\n### Description\n\nWhile the `USlideOver` is active, it is not possible to interact with the background elements, even if `:overlay=\"false\"`. This seems counter-intuitive and [formerly classified as a bug in v2](https://github.com/nuxt/ui/issues/1402#issuecomment-2872304863).\n\n### Additional context\n\ntested with both 3.1.1 and 3.1.0\n\nA workaround is setting `\"pointer-events: auto\"` in the background element styles, which seems to enable all pointer events.\n\n### Logs\n\n```shell-script\n\n```",[2923,2924,2925],{"name":2870,"color":2871},{"name":2856,"color":2857},{"name":2874,"color":2875},4135,"Slideover blocks background interaction even with `overlay=false`","2025-05-13T12:59:56Z","https://github.com/nuxt/ui/issues/4135",0.7134183,{"description":2932,"labels":2933,"number":2938,"owner":2859,"repository":2859,"state":2902,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, vite\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-s3ebia?file=app.vue,components%2FFullscreenBackground.vue\r\n\r\n### Describe the bug\r\n\r\nI was making a background for a modal component when I noticed a strange behaviour with the `\u003CTransition />` component, specifically when the `appear` prop is set.\r\n\r\nIt seems that the click event listener on an element inside `\u003CTransition appear>` isn't being properly handled.\r\nSteps to reproduce:\r\n1. open the reproduction\r\n2. click on the semi-transparent fullscreen div\r\n3. *nothing happens* even though it should have set its visibility to `false`\r\n\r\n1. remove `appear` from the `\u003CTransition>` component in `FullscreenBackground.vue`\r\n2. repeat the same steps & now the click is properly handled\r\n\r\n### Additional context\r\n\r\nI've tried and I couldn't reproduce the same issue in Vue, so I assume it could be a bug in Nuxt.\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2934,2937],{"name":2935,"color":2936},"3.x","29bc7f",{"name":2910,"color":2911},24754,"`\u003CTransition appear>` breaks click event listener","2023-12-15T10:09:43Z","https://github.com/nuxt/nuxt/issues/24754",0.72552806,{"description":2944,"labels":2945,"number":2947,"owner":2859,"repository":2859,"state":2902,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.8.1\r\n- Builder: -\r\n- User Config: srcDir, components, devtools, modules, vite, hooks, app, runtimeConfig\r\n- Runtime Modules: @vueuse/nuxt@10.11.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-vxspid?file=src%2Fplugins%2FclickOutside.ts\n\n### Describe the bug\n\nHello, not sure if you can help with this. I'm trying to implement a basic click outside functionality in a nuxt app.\r\nI'm trying to use @vueuse/components and I import @vueuse/nuxt in modules in nuxt config.\r\nmodules: [\r\n '@vueuse/nuxt',\r\n ],\r\n Then I create a plugin with this\r\n \r\n import { vOnClickOutside } from '@vueuse/components'\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n nuxtApp.vueApp.directive('clickOutside', vOnClickOutside)\r\n})\r\n\r\nHowever, I keep receiving this message after trying to use the dom element \u003COnClickOutside> in the HTML of the page :\r\n\r\n[Vue warn]: Failed to resolve component: OnClickOutside \r\nIf this is a native custom element, make sure to exclude it from \r\ncomponent resolution via compilerOptions.isCustomElement.\r\n\r\nIf I try to use the v-on-click-outside directive in the HTML I receive the following error : \r\n\r\n[Vue warn]: Failed to resolve directive: on-click-outside\r\n\r\nI don't know which would be a correct solution for this.\r\n\r\nThank you in advance for your help\r\n\r\nCarlota\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2946],{"name":2910,"color":2911},28060,"@vueuse/nuxt + @vueuse/components => vOnClickOutside","2024-07-05T22:04:25Z","https://github.com/nuxt/nuxt/issues/28060",0.73165965,{"description":2953,"labels":2954,"number":2957,"owner":2859,"repository":2859,"state":2902,"title":2958,"updated_at":2959,"url":2960,"score":2961}," nuxtjs layout is making vuetify overlay stop working\r\nI have a login layout and another default,\r\nAfter logging in I'm redirected to the dashboard screen.\r\nif I enter through the browser http: // myurl / dashboard the overlay closes when I click.\r\nif I log in to http: // myurl / login and after login I redirect (self. $ nuxt. $ router.replace ({path: '/ dashboard')) to dashboard.\r\nthe click on orverlay stops working\r\nI tested it without using nuxtjs and it worked, so I think there is something from nuxtjs that is breaking some js from vuetify, but it does not generate any errors\r\n\r\ni tested! nuxtjs not work with vuetify 16.8 only 16.1\r\nbroken navigation drawer overlay\r\n\r\nI tested with version 16.1 and it works, in version 16.8 does not work the click of the overlay in navigationdrawer when we use different layouts in nuxtjs\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1699\">#c1699\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2955,2956],{"name":2885,"color":2886},{"name":2913,"color":2914},1899,"vuetify 16.8 not work with nuxtjs lastest version only 16.1","2023-02-06T11:25:02Z","https://github.com/nuxt/nuxt/issues/1899",0.73346645,{"description":2963,"labels":2964,"number":2967,"owner":2859,"repository":2859,"state":2902,"title":2968,"updated_at":2969,"url":2970,"score":2971},"I have a use case where I'm building a mobile-like UI. One of my Nuxt pages is supposed to slide up over the current content (akin to a panel) when navigated to, and slide down when navigating away. I set the transition mode to \"in-out\" so the current view does not transition out until the pane has slid up fully, but when navigating away from the pane, there's no animation at all.\r\n\r\nI have something like so for the CSS:\r\n\r\n```css\r\n.panel {\r\n width: 100vw;\r\n height: 100vh;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n.panel-enter-active {\r\n animation: slideUp 350ms cubic-bezier(0.42, 0, 0.58, 1) forwards;\r\n}\r\n.panel-leave-active {\r\n animation: slideDown 350ms cubic-bezier(0.42, 0, 0.58, 1) forwards;\r\n}\r\n\r\n@keyframes slideUp {\r\n 0% {\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n 100% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n}\r\n@keyframes slideDown {\r\n 0% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n 100% {\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n}\r\n```\r\n\r\nThis is even the case if I set the other pages transition to in-out, there still isn't any kind of transition. I can't think of any other way to have a panel (as a page) slide up and down _over_ another page.\r\n\r\n**Edit:** Repo demonstrating the issue — https://bitbucket.org/syropian/nuxt-transition-bug\r\n\r\nTo reproduce go from the panel page to the home page or \"other\" page to the home page, and notice how they don't animate out. \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2359\">#c2359\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2965,2966],{"name":2910,"color":2911},{"name":2913,"color":2914},2715,"\"in-out\" transition modes can never animate out?","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/2715",0.735476,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fW_GuASRhQnLZ9UIDwJzaqefPFble2GTLEJ8aMyHB7JI":-1},"/nuxt/ui/3985"]