` 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).",[1984,1987,1990,1993],{"name":1985,"color":1986},"enhancement","8DEF37",{"name":1988,"color":1989},"good first issue","fbca04",{"name":1991,"color":1992},"upstream","E8A36D",{"name":1994,"color":1995},"馃嵃 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.77787876,{"description":2004,"labels":2005,"number":2012,"owner":1997,"repository":2013,"state":1998,"title":2014,"updated_at":2015,"url":2016,"score":2017},"### 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```",[2006,2009],{"name":2007,"color":2008},"bug","d73a4a",{"name":2010,"color":2011},"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.77855283,{"description":2019,"labels":2020,"number":2025,"owner":1997,"repository":1997,"state":2026,"title":2027,"updated_at":2028,"url":2029,"score":2030},"### 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>",[2021,2022],{"name":1985,"color":1986},{"name":2023,"color":2024},"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.7522355,{"description":2032,"labels":2033,"number":2038,"owner":1997,"repository":1997,"state":2026,"title":2039,"updated_at":2040,"url":2041,"score":2042},"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>",[2034,2037],{"name":2035,"color":2036},"available soon","6de8b0",{"name":2023,"color":2024},233,"Page Prefetching","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/233",0.7570704,{"labels":2044,"number":2051,"owner":1997,"repository":1997,"state":2026,"title":2052,"updated_at":2053,"url":2054,"score":2055},[2045,2047,2050],{"name":2046,"color":2011},"stale",{"name":2048,"color":2049},"pending triage","E99695",{"name":2023,"color":2024},7090,"Shifting elements when navigating between pages","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/7090",0.7613317,{"description":2057,"labels":2058,"number":2068,"owner":1997,"repository":2013,"state":2026,"title":2069,"updated_at":2070,"url":2071,"score":2072},"### Description\n\nI really love all the work that went into this, but it's currently connected to vue-router for `Link` and `Pagination` components. I would love to see these become optional dependencies so it can be used with projects that do not use `vue-router`.\n\nMaybe there is some way to stub out the link components to enable support for Inertia \\ default HTML?",[2059,2062,2065],{"name":2060,"color":2061},"question","d876e3",{"name":2063,"color":2064},"v3","49DCB8",{"name":2066,"color":2067},"vue","42b883",3001,"How likely is it that we'll see a routerless version?","2025-04-14T08:47:28Z","https://github.com/nuxt/ui/issues/3001",0.7644251,{"description":2074,"labels":2075,"number":2086,"owner":1997,"repository":1997,"state":2026,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### 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).",[2076,2077,2080,2083],{"name":1985,"color":1986},{"name":2078,"color":2079},"discussion","538de2",{"name":2081,"color":2082},"3.x","29bc7f",{"name":2084,"color":2085},"performance","E84B77",15072,"Improve loading sequence of hydration `\u003Cscript />` 馃殌 ","2023-11-20T11:10:34Z","https://github.com/nuxt/nuxt/issues/15072",0.7668625,{"description":2092,"labels":2093,"number":2103,"owner":1997,"repository":2104,"state":2026,"title":2105,"updated_at":2106,"url":2107,"score":2108},"I'm going to preface this by saying I'm an experienced backend developer who has recently been diving into the world of nuxt/vue/nodejs etc., so I apologize in advance if I'm making an obvious oversight.\r\n\r\nI'm trying to add Vue component testing to an already established project and am having trouble with integrating the `nuxt-vitest` package. \r\n\r\nSpecifically, I'm having the issue of `npm run dev` failing with an `error while updating dependencies` as shown below:\r\n\u003Cimg width=\"985\" alt=\"image\" src=\"https://github.com/danielroe/nuxt-vitest/assets/127154893/1c1b0142-c463-4e2b-8a3c-db14b8120ab9\">\r\n\r\nThis error starts happening as soon as I add `import { mountSupsended } from 'nuxt-vitest/utils'` to my `nuxt.test.js` file that is in a subfolder inside my `components` directory.\r\n\r\nHere are my dependencies:\r\n```\r\n \"devDependencies\": {\r\n \"@tailwindcss/forms\": \"^0.5.3\",\r\n \"@vue/test-utils\": \"^2.4.1\",\r\n \"@vueuse/core\": \"^9.10.0\",\r\n \"@vueuse/nuxt\": \"^9.10.0\",\r\n \"autoprefixer\": \"^10.4.13\",\r\n \"happy-dom\": \"^10.11.2\",\r\n \"html5-qrcode\": \"^2.3.8\",\r\n \"nuxt\": \"^3.2.3\",\r\n \"nuxt-vitest\": \"^0.11.0\",\r\n \"postcss\": \"^8.4.19\",\r\n \"react\": \"^18.2.0\",\r\n \"react-dom\": \"^18.2.0\",\r\n \"tailwindcss\": \"^3.2.4\",\r\n \"vitest\": \"^0.33.0\"\r\n },\r\n \"dependencies\": {\r\n \"@formkit/nuxt\": \"^0.17.2\",\r\n \"@pinia/nuxt\": \"^0.4.11\",\r\n \"@sphereon/isomorphic-argon2\": \"^1.0.1\",\r\n \"@vueuse/components\": \"^9.10.0\",\r\n \"@vueuse/integrations\": \"^9.10.0\",\r\n \"buffer\": \"^6.0.3\",\r\n \"dayjs\": \"^1.11.7\",\r\n \"focus-trap\": \"^7.2.0\",\r\n \"pinia\": \"^2.1.6\",\r\n \"prettier\": \"^2.8.3\"\r\n },\r\n```\r\n\r\nIt is currently running with Nuxt 3.7.4\r\n\r\nI have tried and failed to reproduce this on a smaller toy repo.\r\n\r\nMight you have any pointers for figuring out what is going on here? I've spent the last two days trying to figure this out.",[2094,2097,2100],{"name":2095,"color":2096},"vitest-environment","b60205",{"name":2098,"color":2099},"needs reproduction","DE7793",{"name":2101,"color":2102},"closed-by-bot","ededed",599,"test-utils","Issues resolving dependencies when running `nuxt dev`","2023-12-10T01:51:33Z","https://github.com/nuxt/test-utils/issues/599",0.76820856,{"description":2110,"labels":2111,"number":2114,"owner":1997,"repository":2013,"state":2026,"title":2115,"updated_at":2116,"url":2117,"score":2118},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2112,2113],{"name":2007,"color":2008},{"name":2063,"color":2064},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.7703434,{"description":2120,"labels":2121,"number":2122,"owner":1997,"repository":2123,"state":2026,"title":2124,"updated_at":2125,"url":2126,"score":2127},"Docs: https://posthog.com/docs/libraries/js\r\n\r\nFor reference this is how I currently instrument it:\r\n\r\n```\r\nimport { Capacitor } from '@capacitor/core'\r\nimport { posthog } from 'posthog-js'\r\nimport { appVersion } from '~/shared/version'\r\n\r\nexport default defineNuxtPlugin({\r\n name: 'analytics',\r\n setup() {\r\n if (import.meta.env.TEST) {\r\n return\r\n }\r\n\r\n const config = useRuntimeConfig()\r\n const router = useRouter()\r\n\r\n if (config.public.analyticsReportingEnabled) {\r\n posthog.init(config.public.posthog.dsn, {\r\n capture_pageview: false,\r\n capture_pageleave: true,\r\n api_host: config.public.posthog.apiHost,\r\n disable_session_recording: true,\r\n advanced_disable_decide: true,\r\n advanced_disable_feature_flags: true,\r\n advanced_disable_feature_flags_on_first_load: true,\r\n enable_recording_console_log: false,\r\n autocapture: false\r\n })\r\n\r\n posthog.register({\r\n environment: config.public.appEnvironment,\r\n countryCode: config.public.appCountryCode,\r\n release: appVersion,\r\n platform: Capacitor.getPlatform(),\r\n native: Capacitor.isNativePlatform()\r\n })\r\n\r\n router.afterEach(to => {\r\n posthog.capture('$pageview', {\r\n $current_url: to.fullPath\r\n })\r\n })\r\n }\r\n\r\n return {\r\n provide: {\r\n analytics: posthog\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\nand after the user has logged in or we detect they are already logged in on page load:\r\n\r\n```\r\nthis.analytics.identify(userId, {\r\n email\r\n roles\r\n})\r\n ```\r\n \r\n Thanks!\r\n\r\n",[],206,"scripts","Suggestion: Posthog [analytics]","2024-09-03T16:06:49Z","https://github.com/nuxt/scripts/issues/206",0.7703547,["Reactive",2129],{},["Set"],["ShallowReactive",2132],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"gF1aocwj-xybkaKnKGWjb3gPxtWypUZPFJ072aWByxI":-1},"/nuxt/ui/2539"]