` component that shows the loading bar at the top but I think if we combine that with this native loading indicator feature we can really make great UX.\r\n\r\nYes, this is bleeding edge feature not currently supported everywhere but I think it would be nice to still give users the option to use this new feature _**IF their browser supports it.**_\r\n\r\nDocs: \r\nhttps://developer.chrome.com/docs/web-platform/navigation-api/\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/Navigation_API\r\n\r\nDemo:\r\nhttps://gigantic-honored-octagon.glitch.me/\r\n\r\n_(In the demo, you can activate the `Add an artificial two-second delay to all navigations (should impact the loading spinner/scroll restoration/focus reset/accessibility announcements).` checkbox to see the native loader appearing on the tab when navigating)_\r\n\r\n\r\n\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2865,2868,2871,2874],{"name":2866,"color":2867},"enhancement","8DEF37",{"name":2869,"color":2870},"good first issue","fbca04",{"name":2872,"color":2873},"upstream","E8A36D",{"name":2875,"color":2876},"馃嵃 p2-nice-to-have","0E8A16",24553,"nuxt","open","[Feature Request] Use the new browser Navigation API to show a native loading indicator when navigating","2025-02-22T19:58:43Z","https://github.com/nuxt/nuxt/issues/24553",0.76791465,{"description":2885,"labels":2886,"number":2893,"owner":2878,"repository":2894,"state":2879,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.7`\n- Nuxt Version: `3.14.1592`\n- CLI Version: `3.15.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `default`\n- Runtime Modules: `@nuxt/ui@2.19.2`, `@artmizu/nuxt-prometheus@2.4.0`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n### Version\n\nv2.21.1\n\n### Reproduction\n\nhttps://ui2.nuxt.com/components/select-menu#control-the-query\n\nTry to select `Wade` in the query input with mouse or trackpad \n\u003Cimg width=\"494\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a0e90d62-aabb-4d40-9d8d-a6fed67fee02\" />\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2887,2890],{"name":2888,"color":2889},"bug","d73a4a",{"name":2891,"color":2892},"triage","ffffff",3583,"ui","Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.77328384,{"description":2900,"labels":2901,"number":2912,"owner":2878,"repository":2878,"state":2879,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.19.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.3.1`\r\n- Builder: `vite`\r\n- User Config: `extends`, `srcDir`, `build`, `hooks`, `runtimeConfig`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-l1dvnf?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nThere's actually two manifestations of this bug.\r\n\r\nFirst bug:\r\n- Given two pages, A & B, and two layouts, X and Y\r\n- Page A uses Template X\r\n- Page B uses Template Y\r\n- When navigating to page A, it will mount the CSS for Template X\r\n- When navigating to page B, it will mount the CSS for Template Y\r\n- However, when navigating **_back_** to page A, it will not _remove_ the CSS for template Y.\r\n- **Bug:** This means, effectively, that page A's rendering is unstable, and will render differently depending on preceding navigation.\r\n\r\nSecond bug:\r\n- Given the above, if you use pre-fetching with `NuxtLink` (`\u003CNuxtLink>` without `noPrefetch`), then the CSS for template Y will be injected into the page when navigating to page A, even though it has no association with Template Y.\r\n- In other words, Nuxt eagerly injects CSS un-associated with the current page\r\n\r\nNote that the first bug occurs whether or not you use `noPrefetch`.\r\n\r\n\r\n### Additional context\r\n\r\nI originally thought this bug was associated with / the same bug as https://github.com/nuxt/nuxt/issues/3877, but was told that was not the case, so filing this new issue. I also thought it might be the exact same as [this issue](https://github.com/nuxt/nuxt/issues/13778), but that issue is closed?\r\n\r\n### Logs\r\n\r\n_No response_",[2902,2905,2906,2909],{"name":2903,"color":2904},"pending triage","E99695",{"name":2888,"color":2889},{"name":2907,"color":2908},"馃敤 p3-minor","FBCA04",{"name":2910,"color":2911},"performance","E84B77",22817,"Nuxt does not clean up CSS after navigation (and injects CSS pre-navigation)","2024-11-28T13:52:13Z","https://github.com/nuxt/nuxt/issues/22817",0.7743334,{"description":2918,"labels":2919,"number":2924,"owner":2878,"repository":2878,"state":2925,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### What problem does this feature solve?\r\n\r\nCurrently the navigation behavior with Nuxt is the following:\r\n\r\n1. User clicks on a link\r\n2. Loading of new page starts\r\n3. User waits for new page load to complete\r\n4. Route updates\r\n5. Exit transition of current view plays\r\n6. Enter transition of new view plays\r\n7. Navigation is complete\r\n\r\nThis is not ideal UX-wise. Even when I make efforts to make my page quite fast and enable the loading indicator, the load times are inconsistent, and the page feels broken and frozen upon clicking a link as a result.\r\n\r\n\r\n### What does the proposed changes look like?\r\n\r\nI think a better behavior would be the following:\r\n\r\n1. User clicks on a link\r\n2. Route updates\r\n3. Loading of new page starts\r\n4. Exit transition of current view plays\r\n5. User waits for new page load to complete\r\n6. Enter transition of new view plays\r\n7. Navigation is complete\r\n\r\nThis way, we mitigate the problems significantly by taking advantage of two common patterns: offering immediate feedback after user interaction, and using exit transition duration to hide part of the loading time.\r\n\r\nI don't think there's need to take away the current behavior, but to rather a new alternative as an option, and also consider using it as a default. I'm sure I'm not the first one thinking of this but could still find no issues or discussion around it. Also whether the route visibly updating immediately or during the transition phase... probably not that big a deal, but immediate feedback is good.\r\n\r\nI'm not really up-to-date on all the tech behind the navigation logic, but I think this could drastically improve the perceived performance of Nuxt sites, hiding most of the page loads behind transitions.\r\n\r\n**EDIT:** \r\n\r\nA couple more points to clarify:\r\n\r\n- I'm not proposing any changes to the loading bar - at least nothing comes to mind that would need it.\r\n- I could already move loading logic from `asyncData` to other lifecycle hooks, in which case I get detailed control over my loading and wait time behavior. But I of course rely on `asyncData` for a reason, which is I want my prerendered pages to have the content available.\r\n- I'm **not** proposing rendering the new page without asyncData completing first. I'm proposing removing current page without delay, and waiting for the new page to load after that, if loading still takes time.\r\n\r\nOf course it would be awesome to have even more controls over how long loading times are handled between transitions, or even rendering (some) pages before asyncData completes in SPA mode only (i.e. allowing devs to write custom loading behavior while still staying server-render-friendly).\r\n\r\n\u003C!--cmty-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8620\">#c8620\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2920,2921],{"name":2866,"color":2867},{"name":2922,"color":2923},"2.x","d4c5f9",4978,"closed","When moving to a new route, transition current view out without delay","2024-06-14T16:10:17Z","https://github.com/nuxt/nuxt/issues/4978",0.7549703,{"labels":2931,"number":2936,"owner":2878,"repository":2878,"state":2925,"title":2937,"updated_at":2938,"url":2939,"score":2940},[2932,2934,2935],{"name":2933,"color":2892},"stale",{"name":2903,"color":2904},{"name":2922,"color":2923},7090,"Shifting elements when navigating between pages","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/7090",0.7553802,{"description":2942,"labels":2943,"number":2948,"owner":2878,"repository":2878,"state":2925,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\n\nNuxt 3.10.4\r\nPrerendered sites\r\nHosted on Netlify\n\n### Reproduction\n\nMost live Nuxt websites have the same problem\n\n### Describe the bug\n\n(I've already posted in Github discussion the same problem https://github.com/nuxt/nuxt/discussions/25960, but now the new Web Vital is live, so i think it is quite severe)\r\n\r\nWe have a relatively new website built with Nuxt 3 and Storyblok as CMS.\r\nWe prerender almost all sites and we have really good real life user scores in all Google pagespeed metrics.\r\nBut the new metric INP (https://web.dev/articles/inp) is 233ms on mobile, which is not optimal (on desktop its around 100 so its okay).\r\n\r\n\r\n\r\nI've also looked at some other nuxt sites and https://nuxt.com/ for example has an INP of 604ms on mobile! (https://pagespeed.web.dev/analysis/https-nuxt-com/5nu8bd42xc?form_factor=mobile)\r\nOther cases with similar scores as us:\r\nOpenAI: https://pagespeed.web.dev/analysis/https-openai-com/nqi508yurn?form_factor=mobile\r\nEcosia: https://pagespeed.web.dev/analysis/https-www-ecosia-org/mk6jl9e1pc?form_factor=mobile\r\nTiktok B2B: https://pagespeed.web.dev/analysis/https-www-tiktok-com-business-es/ol9rsuh9c8?form_factor=mobile\r\n\r\nI've read that because of the high load/blocking time on the main thread, frameworks like Nuxt or React have a much higher INP than other websites (e.g. our old wordpress website is at 172ms right now, which is good enough for Google). This is especially true on weaker mobile devices.\r\n\r\nI don't know, but maybe this time is especially large on weaker devices (or every step shown here is generally longer)?\r\n\r\nI know that we have quite a lot of features and interactions on our website and the sites themselves are sometimes quite long, so that could also be the cause, but i wanted to ask if anyone gets similar results or knows how to reduce it on weaker devices.\r\n\r\nThanks!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2944,2947],{"name":2945,"color":2946},"3.x","29bc7f",{"name":2910,"color":2911},26271,"identify opportunities to improve INP on mobile devices","2024-06-21T02:11:13Z","https://github.com/nuxt/nuxt/issues/26271",0.76271546,{"description":2954,"labels":2955,"number":2960,"owner":2878,"repository":2894,"state":2925,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Environment\n\n- Docspage\n- nuxt/ui: v3.0.0-alpha.5 \n\n### Version\n\nv3.0.0-alpha.5 \n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/slideover\n\n### Description\n\ncompared to https://ui.nuxt.com/components/slideover the new slideover feels somehow laggy. I think its due to the early focus trap and the delay from opening and closing.\n\n### Additional context\n\nwhen closing the slideover the delay for the scrollbar is prettry big.\n\n### Logs\n\n_No response_",[2956,2957],{"name":2888,"color":2889},{"name":2958,"color":2959},"v3","49DCB8",2321,"Slideover feels strange","2024-10-15T15:29:56Z","https://github.com/nuxt/ui/issues/2321",0.7658724,{"description":2966,"labels":2967,"number":2974,"owner":2878,"repository":2878,"state":2925,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Describe the feature\n\nHi,\r\n\r\n### Current Problem\r\nNuxt js currently preload then execute the scripts at the bottom of the body for priority boosting. But `link:rel=preload` doesn't have greater browser support so I'm browser which doesn't support it will take long time to fetch and execute it.\r\n\r\n\r\n\r\n### Solution\r\n\r\nI propose an alternate approach to load first party script with defer, where `\u003Cscript defer>` will be added to the , with the objective of streamlining the overall loading sequence, modeling web-performance best practices, and moving away from preload as a crutch for signal boosting.\r\n\r\nBrowser compatibility (MDN) -:\r\n\r\n`\u003Clink rel=\"preload\" />`\r\n\r\n\r\n`\u003Cscript defer>`\r\n\r\n\r\n### Advantages \r\n\r\n- Scripts wont block the HTML parsing as intended.\r\n\r\n\r\n- Improvements in FCP, LCP metric, faster time to visual-completeness.\r\n\r\n- Additional optimization and predictability given the guaranteed order of execution of defer scripts.\r\n\r\n\r\n### Issue when implementing\r\n\r\nThis works perfectly fine for `type=module`(automatically adds defer attr) scripts too but for them preloading having some benefits so we need to conditionally add preload tag if it is targeted to new module based syntax.\r\n\r\n### References\r\n\r\nCurrent Next js implementation (Please check this out for better understanding)-: https://github.com/vercel/next.js/discussions/24938\r\n\r\nAbout scripts loading-: https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6\r\n\r\nIssues of preloading-: https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/\r\n___\r\n\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2968,2969,2972,2973],{"name":2866,"color":2867},{"name":2970,"color":2971},"discussion","538de2",{"name":2945,"color":2946},{"name":2910,"color":2911},15072,"Improve loading sequence of hydration `\u003Cscript />` 馃殌 ","2023-11-20T11:10:34Z","https://github.com/nuxt/nuxt/issues/15072",0.768037,{"description":2980,"labels":2981,"number":2982,"owner":2878,"repository":2983,"state":2925,"title":2984,"updated_at":2985,"url":2986,"score":2987},"Saw a weird error every time i tried to open: https://nuxt.com/docs/guide/directory-structure/pages#nested-routes\r\nHowever opening the site and navigating to that page through the router is fine, it only happens when visiting the link.\r\n\r\nOS: debian 12\r\nBrowser: FireFox stable 124.0.2 (64-bit)\r\n\r\nscreenshot: \r\n\r\n",[],1565,"nuxt.com","500 error: r.value is null","2024-04-19T11:08:52Z","https://github.com/nuxt/nuxt.com/issues/1565",0.7703797,{"description":2989,"labels":2990,"number":2995,"owner":2878,"repository":2878,"state":2925,"title":2996,"updated_at":2997,"url":2998,"score":2999},"Can't find any info on this, but does Nuxt have a page prefetching feature similar to Next.js?\r\n\r\nBasically it loads a page in the background, which provides instant navigation once user actually clicks the link.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c196\">#c196\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2991,2994],{"name":2992,"color":2993},"available soon","6de8b0",{"name":2922,"color":2923},233,"Page Prefetching","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/233",0.7713525,["Reactive",3001],{},["Set"],["ShallowReactive",3004],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgF1aocwj-xybkaKnKGWjb3gPxtWypUZPFJ072aWByxI":-1},"/nuxt/ui/2539"]