` like this:\n\n```vue\n\u003Ctemplate>\n \u003CNuxtLoadingIndicator />\n \u003CAppNavbar />\n \u003Cdiv class=\"h-32\" />\n \u003CUContainer>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UContainer>\n \u003Cdiv class=\"h-32\" />\n \u003CAppFooter />\n\u003C/template>\n```\nmy index page on page/\n\n```vue\n \u003Ctemplate>\n \u003Cmain class=\"min-h-screen\">\n \u003Cdiv class=\"space-y-24\">\n \u003CHomeIntro />\n \u003CHomePremiumService />\n \u003CHomeWork />\n \u003CHomeSocialLinks />\n \u003CHomeFeaturedProjects />\n \u003CHomeFeaturedArticles />\n \u003CHomeTestimonials />\n \u003CHomeContactCTA />\n \u003C/div>\n \u003C/main>\n\u003C/template>\n```\n\nI’ve created a video demonstrating the issue I'm encountering with Nuxt. The video shows the flashing behavior when navigating between pages, even though I have set up transitions as expected.\n\nhttps://github.com/user-attachments/assets/50acdc47-bb18-4f89-b186-f6f220cd731c\n\nEven though the transition is defined, navigation causes a brief white screen before the new content appears. It seems like the layout or components are unmounted/re-mounted unexpectedly.\n\n## What I’ve tried\n\n- Using static assets (`\u003CNuxtImg>`) with placeholder and blur.\n- Moving layout elements inside Nuxt layouts.\n- Ensuring no SSR hydration errors.\n- Checked for large images or fonts causing flashes.\n- Tried with `nuxt@3.8.1`, but got package warnings on `glob@7.x`.\n\n## Possible cause\n\nIt seems like `\u003CNuxtPage />` renders **before** layout is fully hydrated, or there's a delay with dynamic components (like `useSeoMeta`, runtime config, or `\u003CNuxtImg>`). \nMaybe the `transition` hook isn't synced with the component load.\n\n## Questions\n\n- Is this a known issue with page transitions in Nuxt 3?\n- Should layout or page transitions be handled differently to avoid this kind of visual glitch?\n- Any workaround for a smoother visual transition without flicker?\n\nThanks in advance 🙏\n",[3059,3062],{"name":3060,"color":3061},"pending triage","E99695",{"name":3063,"color":3047},"needs reproduction",32053,"💥 Nuxt Page Transition causes a Flash / Blank when navigating — possible layout/rendering issue","2025-05-09T14:47:20Z","https://github.com/nuxt/nuxt/issues/32053",0.7152028,{"description":3070,"labels":3071,"number":3077,"owner":3028,"repository":3028,"state":3030,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v16.17.0\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: typescript, transpile, css, modules, i18n, imports, unocss, runtimeConfig, vite\r\n- Runtime Modules: nuxt-graphql-client@^0.2.27, @nuxtjs/i18n@8.0.0-beta.12, @unocss/nuxt@^0.52.5, @vueuse/nuxt@10.1.2\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nAdd to `nuxt.config.ts`\r\n\r\n````ts\r\n experimental: {\r\n viewTransition: true\r\n },\r\n````\r\n\r\nAdd to `app.vue`\r\n\r\n````vue\r\n\u003CNuxtLayout>\r\n \u003CNuxtLoadingIndicator />\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_",[3072,3075,3076],{"name":3073,"color":3074},"good first issue","fbca04",{"name":3019,"color":3020},{"name":3046,"color":3047},21280,"NuxtLoadingIndicator is broken when using together with experimental.viewTransitions ","2024-11-19T16:20:26Z","https://github.com/nuxt/nuxt/issues/21280",0.72079164,{"description":3083,"labels":3084,"number":3088,"owner":3028,"repository":3029,"state":3030,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://github.com/nuxt-ui-pro/dashboard\nhttps://dashboard-template.nuxt.dev/\n\n### Description\n\nI'm getting the following warning in the console: `Added non-passive event listener to a scroll-blocking 'touchstart' event.`\n\nI'm using a few heavily altered components from the Nuxt UI Pro Dashboard template. I thought it was something I did and started on a reproduction, but you can see the same warning pop up in the template itself, no reproduction needed: https://dashboard-template.nuxt.dev/\n\nI think I have narrowed it down to the `DashboardSideBar`. Removing that component in my project also removes the warning.\n\nI've had no luck trying to fix it, but it might be similar to this bug that was fixed long ago: https://github.com/nuxt/ui/issues/1512\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3085,3086,3087],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4580,"DashboardSideBar: Added non-passive event listener to a scroll-blocking 'touchstart' event.","2025-07-23T16:15:53Z","https://github.com/nuxt/ui/issues/4580",0.7210387,{"description":3094,"labels":3095,"number":3102,"owner":3028,"repository":3028,"state":3103,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Environment\r\n\r\n```bash\r\nNuxt project info: 0:30:28\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: pnpm@8.15.4\r\n- Builder: -\r\n- User Config: typescript, modules, app, features, experimental, css, postcss, recaptcha, pwa, devtools, vite\r\n- Runtime Modules: @unocss/nuxt@0.58.6, @nuxtjs/i18n@8.1.1, @vueuse/nuxt@10.9.0, @vite-pwa/nuxt@0.6.0\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-lpzonl?file=app.vue,styles%2Fglobal.css,nuxt.config.ts\r\n\r\n### Describe the bug\r\n\r\nThere is no way to change `hideDelay` from the loading indicator component, and so we need to await ~1s to hide the indicator: page end + 500ms in `hideDelay` + 400ms in the css transition.\r\n\r\nNuxtLoadingIndicator should expose the `hideDelay` or `force` prop without needing to rewrite it, `hideDelay: 0` should be the default value.\r\n\r\nYou can check the SB reproduction:\r\n- open preview in a new tab\r\n- check the delay when navigating\r\n- open devtools and find `_nuxt/node_modules/nuxt/dist/app/composables/loading-indicator.js?v=\u003Csome_version>` in the source tab\r\n- add a breakpoint in L9\r\n- refresh the page and set `hideDelay` to 0\r\n- navigate again\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3096,3099],{"name":3097,"color":3098},"enhancement","8DEF37",{"name":3100,"color":3101},"🍰 p2-nice-to-have","0E8A16",26637,"closed","weird behavior with loading indicator component","2025-04-03T15:17:07Z","https://github.com/nuxt/nuxt/issues/26637",0.69662195,{"description":3109,"labels":3110,"number":3113,"owner":3028,"repository":3029,"state":3103,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3111,3112],{"name":3019,"color":3020},{"name":3022,"color":3023},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.70715296,{"description":3119,"labels":3120,"number":3127,"owner":3028,"repository":3029,"state":3103,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@10.6.1\n- Builder: -\n- User Config: ssr, dev, debug, app, modules, devtools, css, icon, future, nitro, vite, compatibilityDate, typescript, runtimeConfig, eslint\n- Runtime Modules: @nuxt/eslint@1.1.0, @nuxt/ui-pro@3.0.0-beta.2, @nuxt/image@1.9.0, @vueuse/nuxt@12.7.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-beta.2\n\n### Reproduction\n\nFor the PageList component, the first child is correctly converted to a li, the remaining ones are still divs and haven't been converted. Also, the data-orientation value of the first li is incorrectly forced to vertical.\n\n### Description\n\nFor the PageList component, the first child is correctly converted to a li, the remaining ones are still divs and haven't been converted. Also, the data-orientation value of the f\n\n\u003Cimg width=\"603\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/1db776b9-a16f-4788-8834-c68dfa931c7f\" />\n\nirst li is incorrectly forced to vertical.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3121,3122,3123,3126],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3124,"color":3125},"pro","5BD3CB",{"name":3025,"color":3026},3485,"For the PageList component, the first child is correctly converted to a li, the remaining ones are still divs and haven't been converted. Also, the data-orientation value of the first li is incorrectly forced to vertical.","2025-03-08T16:32:27Z","https://github.com/nuxt/ui/issues/3485",0.7091678,{"description":3133,"labels":3134,"number":3143,"owner":3028,"repository":3029,"state":3103,"title":3144,"updated_at":3145,"url":3146,"score":3147},"### Environment\n\n- Operating System: `Windows 11`\n- Browser: `Chrome 131`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt UI\n\n### Version\n\nv2.20.0, 3.0.0-alpha-x\n\n### Reproduction\n\n[Tabs ](https://ui.nuxt.com/components/tabs) and [Input#disabled](https://ui.nuxt.com/components/input#disabled) sections of ui.nuxt.com, as well as pretty much every other component that has a \"Disabled\" state, demonstrate the issue\n\n### Description\n\nThe current styling for `disabled` state of different components in Nuxt UI has a very subtle visual distinction from the enabled state. On a monitor with good sRGB calibration (Gigabyte M32U - IPS, 4K, sRGB mode), the grayed-out appearance of the `disabled` state in almost every Nuxt UI component (as shown on the [ui.nuxt.com/components](https://ui.nuxt.com/components)) is almost indistinguishable from the non-disabled state.\n\n**Issue:**\n- Disabled elements do not provide a clear visual cue, making it hard for users to differentiate their state at a glance.\n- This affects usability and accessibility, especially for users with mild visual impairments or varying screen settings.\n\n**Suggestion:**\n\nConsider increasing contrast differences or adding clearer indicators (e.g., opacity) to improve visual accessibility for disabled elements.\n\n**Example:**\n[Tabs](https://ui.nuxt.com/components/tabs) and [Input#disabled](https://ui.nuxt.com/components/input#disabled) sections of ui.nuxt.com, as well as pretty much every other component that has a \"Disabled\" state, demonstrate the issue.\n\n**Video** (may look different on your monitor):\nNuxt UI `2.20.0`:\n\n\nhttps://github.com/user-attachments/assets/81eea3ee-1c74-4036-9fe9-55b18cb16851\n\n\nNuxt UI `3.0.0-alpha-x`:\n\n\nhttps://github.com/user-attachments/assets/9018589e-98fb-46d1-97e5-623fae98727e\n\n\n**Photos** of how it looks like on the mentioned monitor:\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/97736e43-fe88-428a-b3b2-67fcbe9b37dc\" width=\"400\"/>\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/6caf4ee6-0cb9-4c7e-9bc7-07e320248b8e\" width=\"400\"/>\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/b64d9960-4877-4fc4-b016-92ce8c4cf393\" width=\"400\"/>\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3135,3136,3137,3138,3141],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":3139,"color":3140},"closed-by-bot","ededed",{"name":3142,"color":3140},"stale",2995,"Improve disabled state visibility for Tabs and other components","2025-06-18T09:02:44Z","https://github.com/nuxt/ui/issues/2995",0.7097086,{"description":3149,"labels":3150,"number":3155,"owner":3028,"repository":3028,"state":3103,"title":3156,"updated_at":3157,"url":3158,"score":3159},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.7.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@10.1.0\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/lubomirblazekcz/nuxt-layout-repro\r\n\r\n### Describe the bug\r\n\r\nAs mentioned in https://github.com/nuxt/nuxt/issues/15158#issuecomment-1397373067, if NuxtLayout is used in page, the whole layout is re-rendered, even if the contents of the layout don't change.\r\n\r\nThis is clearly visible in repro, the animation occures on each page because of the layout re-render.\r\n\r\nHere is a repro where animation occures only when the layout changes, which would be correct behaviour. This is because the layout is defined in `app.vue`, instead of page - but this is not ideal, because then slot & template doesn't work which is also mentioned in https://github.com/nuxt/nuxt/issues/15158\r\n\r\nhttps://stackblitz.com/github.com/lubomirblazekcz/nuxt-layout-repro/tree/working\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3151,3154],{"name":3152,"color":3153},"3.x","29bc7f",{"name":3060,"color":3061},23421,"Layout re-renders even if the layout contents are same","2023-09-27T05:47:09Z","https://github.com/nuxt/nuxt/issues/23421",0.71202326,["Reactive",3161],{},["Set"],["ShallowReactive",3164],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fcKmDQfy2s1gjJsIsWy088O6cnChT59fC_NU1sOZBouQ":-1},"/nuxt/ui/4491"]