\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[2892,2895,2898],{"name":2893,"color":2894},"enhancement","a2eeef",{"name":2896,"color":2897},"v3","49DCB8",{"name":2899,"color":2900},"triage","ffffff",3307,"ui","Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-02-13T19:05:27Z","https://github.com/nuxt/ui/issues/3307",0.7165474,{"description":2908,"labels":2909,"number":2916,"owner":2871,"repository":2871,"state":2917,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Version\n\n[v2.4.3](https://github.com/nuxt.js/releases/tag/v2.4.3)\n\n### Reproduction link\n\n[https://github.com/markplewis/nuxt-external-resource-loading-issue](https://github.com/markplewis/nuxt-external-resource-loading-issue)\n\n### Steps to reproduce\n\nClone [my demo repo](https://github.com/markplewis/nuxt-external-resource-loading-issue) and then do the following:\n\n## Case 1\n\n1. Launch the app via `npm run dev` and open it up in your browser.\n2. Click the \"Test 1\" link.\n3. The following error will appear in your console:\n```\nTypeError: window.jQuery is not a function\n at VueComponent.mounted (test-1.js:34)\n```\n4. Refresh the page.\n5. Everything will load correctly.\n6. Click the \"Home\" link.\n7. Click the \"Test 1\" link.\n8. Everything will load correctly.\n9. Click the \"Home\" link.\n10. Refresh the page.\n11. Click the \"Test 1\" link.\n12. The following error will appear in your console:\n```\nTypeError: window.jQuery is not a function\n at VueComponent.mounted (test-1.js:34)\n```\n13. Refresh the page.\n14. Everything will load correctly.\n\n## Case 2\n\n1. Launch the app via `npm run dev` and open it up in your browser.\n2. Click the \"Test 2\" link.\n3. The \"(CDN script has loaded)\" message will **not** be appended to the `\u003Ch1>` element.\n4. Refresh the page.\n5. The \"(CDN script has loaded)\" message will appear inside the `\u003Ch1>`.\n6. Click the \"Home\" link.\n7. Click the \"Test 2\" link.\n8. The \"(CDN script has loaded)\" message will appear inside the `\u003Ch1>`.\n9. Click the \"Home\" link.\n10. Refresh the page.\n11. Click the \"Test 2\" link.\n12. The \"(CDN script has loaded)\" message will **not** be appended to the `\u003Ch1>` element.\n13. Refresh the page.\n14. The \"(CDN script has loaded)\" message will appear inside the `\u003Ch1>`.\n\n### What is expected ?\n\nI'm trying to load an external script into a Nuxt page via the page's `head`:\n```\nhead() {\n return {\n script: [{\n src: \"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js\"\n }]\n };\n}\n```\nI expect the script to load and be available every time the page loads, regardless of whether it was served directly from the server or rendered on the client-side.\n\n### What is actually happening?\n\nUnfortunately, the external script doesn't seem to load when the page is server-rendered - it only seems to work when the page is client-rendered. I discovered the following issues, but neither of them have helped me solve this problem:\n\n- https://github.com/nuxt/nuxt.js/issues/3396\n- https://github.com/nuxt/nuxt.js/issues/3872\n\nIn that first issue, manniL said the following:\n\n> \"Loading external scripts through the head function works fine for me. I'd suggest to do this on a `layout` basis anyway. For pages there is the caveat that you can't ensure the readiness easily.\"\n\nWhat does \"you can't ensure the readiness easily\" mean? I'd prefer not to move this script into my layout because it will only be needed for one particular page, and I don't want to force users to download unnecessary resources.\n\nI can avoid errors (see test case 1, above) by wrapping my calls to `window.jQuery`, like this: \n```\nmounted() {\n if (!process.server && window.jQuery) {\n ... \n }\n}\n```\nBut this leaves me with the problem that I described in test case 2 (see above).\n\n\n\n\n\n\u003C!--cmty-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8677\">#c8677\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2910,2912,2913],{"name":2911,"color":2900},"stale",{"name":2882,"color":2883},{"name":2914,"color":2915},"2.x","d4c5f9",5052,"closed","External script doesn't always load when added to Nuxt page via \"head()\"","2023-05-03T05:33:32Z","https://github.com/nuxt/nuxt/issues/5052",0.6924338,{"description":2923,"labels":2924,"number":2929,"owner":2871,"repository":2871,"state":2917,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Environment\r\n\r\nNuxt 3.8\r\n\r\n### Reproduction\r\n\r\n(any Nuxt3 app with GTM)\r\n\r\n### Describe the bug\r\n\r\nHi. In our company, we rely on Google Analytics to **automatically attach an event listener** that listens to changes in History API.\r\n\r\nThe listener is 100% working when I trigger Google Analytics after the **whole page loaded** (every css/image/... is loaded and the DOM fully mounted).\r\n\r\nHowever, this is not recommended - GA should be triggered right after the HTML arrived and the DOM starts to mount (the so-called \"Page Loaded\" trigger). It makes sense - why should I wait for an image to download in order to fire an XHR request to Google.\r\n\r\nBut when set to Page Loded, the listener works only 50% of the time, and it seems there is a race condition and a random chance that the listener mounts after hard refresh.\r\n\r\nIt kinda looks like if 3rd party sets up the listener too early, it is discarded when Nuxt mounts?\r\n\r\nAnyone who is better acquainted with the code of Nuxt than I am - could it be that somehow, as part of the bootstrapping process, some cleanup script removes all attached event listeners when Nuxt fires up?\r\n\r\nI am not even sure if that would constitute as a bug, but I guess many people rely on Google Analytics and we should have a way for 3rd party to safely mount event listeners.\r\n\r\nThank you for any advice.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2925,2928],{"name":2926,"color":2927},"3.x","29bc7f",{"name":2882,"color":2883},25223,"Event listeners are removed during bootstrap?","2024-01-17T10:36:06Z","https://github.com/nuxt/nuxt/issues/25223",0.69341654,{"description":2935,"labels":2936,"number":2939,"owner":2871,"repository":2871,"state":2917,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.12.1\r\n- Nuxt Version: 3.4.3\r\n- Nitro Version: 2.3.3\r\n- Package Manager: pnpm@8.3.1\r\n- Builder: vite\n\n### Reproduction\n\nInside the `app.vue` file I have the following:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst app = useNuxtApp();\r\n\r\nonMounted(() => {\r\n console.log('onMounted');\r\n});\r\n\r\napp.hook('page:finish', () => {\r\n console.log('page:finish');\r\n});\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"flex min-h-screen flex-col\">\r\n \u003CHtml lang=\"en\" />\r\n \u003CBody class=\"antialiased selection:bg-primary-100 selection:text-primary-600\" />\r\n\r\n \u003CNuxtPage class=\"flex-1\" />\r\n\r\n \u003Csection id=\"about\">Demo section\u003C/section>\r\n \u003C/div>\r\n\u003C/template>\r\n```\n\n### Describe the bug\n\nI'm trying to build a reveal animation when the page is loaded, so I usually create the animation timeline with GSAP inside the \"onMounted\" hook that starts paused and only plays once the page is fully loaded (the `page:finish` hook).\r\n\r\nEverything works perfectly fine if I navigate to any page of the Nuxt app and reload it, except for reloading in pages with a hash in the path AND an actual element with the hash as an id (for example: `http://localhost:8080/#about`). For some reason, if the route path contains a hash of an existing element in the DOM, the `page:finish` hook gets called before `onMounted`. However, if I remove the hash from the URL or there's no element present in the DOM that matches the hash, the order goes back to normal (`onMounted` first and `page:finish` second).\r\n\r\nI don't know why that happens.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2937,2938],{"name":2926,"color":2927},{"name":2882,"color":2883},20617,"The `page:finish` hook gets called before `onMounted` only when hash present in path","2023-05-02T03:12:44Z","https://github.com/nuxt/nuxt/issues/20617",0.6980772,{"description":2945,"labels":2946,"number":2948,"owner":2871,"repository":2871,"state":2917,"title":2949,"updated_at":2950,"url":2951,"score":2952},"I've been trying to select a specific element within the loaded page if it exists with a nuxt plugin similar to this:\r\n\r\n```JavaScript\r\nimport Vue from 'vue'\r\n\r\nexport default ({ app: { router } }) => {\r\n if (!process.browser) return\r\n\r\n router.afterEach((to, from) => {\r\n Vue.nextTick(() => {\r\n window.pageFeature = document.querySelector('#page-feature')\r\n console.log('trying to find pageFeature, got', window.pageFeature)\r\n })\r\n })\r\n}\r\n```\r\n\r\nMy issue is that the nextTick is firing too soon, so I find the initial `#page-feature` element on first load, but subsequent navigation always \"lags behind\" essentially.\r\n\r\nCurrently the `#page-feature` element is in the component that `\u003Cnuxt/>` renders and if I move it deeper it still can't be found - no matter where the element is placed it seems `nextTick` won't work in this instance.\r\n\r\nAm I missing something specific to nuxt to find out when the whole application has finished mounting or is this a bug?\r\n\r\nMaybe there's a better way to do this, I don't particularly want a function in each `page` component calling on mount - however if there is no better way to accomplish this, I will stick to this.\r\n\r\nThanks for your help in advance.\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/c2300\">#c2300\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2947],{"name":2914,"color":2915},2644,"router.afterEach => nextTick doesn't reflect whole application mount","2023-01-18T16:02:30Z","https://github.com/nuxt/nuxt/issues/2644",0.6983037,{"description":2954,"labels":2955,"number":2958,"owner":2871,"repository":2871,"state":2917,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.4.2\r\n- Nitro Version: 2.4.0\r\n- Package Manager: pnpm@8.5.1\r\n- Builder: vite\r\n- User Config: modules, vite, css, imports, pinia, sitemap, app, ignore, telemetry, appConfig, devServer, nitro\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.6.6, @pinia/nuxt@0.4.8, @pinia-plugin-persistedstate/nuxt@1.1.1, @element-plus/nuxt@1.0.4, @nuxtjs/robots@3.0.0, nuxt-simple-sitemap@2.4.11- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-1f3u27?file=app.vue\r\n\r\n### Describe the bug\r\n\r\n`.client.vue` cannot find element by `querySelector` or `ref` in sync `onMounted` \r\n\r\nadd `await nextTick()` at begin of `onMounted` still cannot work if leave this page then go back this page\r\n\r\nI need to import some deps like 'konva' and 'rxjs' on my page, but nuxt cannot resolve them, even if in component wrappered by `\u003CClientOnly>`\r\nthen I found that if I put these code in `.client.vue`, these deps can be resolved successfully. (Is there any other better solution?🙏) \r\n\r\nThen I found this issue. \r\n---\r\n\r\nI'm not sure how `.client.vue` works, some relavated problems is a bit more complex, in `.client.vue` wrappered by `.client.vue`, some document api throw error by `konva`\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2956,2957],{"name":2926,"color":2927},{"name":2882,"color":2883},21100,"`.client.vue` cannot find element by `querySelector` or `ref` in `onMounted` if toggle pages","2023-05-27T04:26:25Z","https://github.com/nuxt/nuxt/issues/21100",0.69958204,{"labels":2964,"number":2967,"owner":2871,"repository":2871,"state":2917,"title":2968,"updated_at":2969,"url":2970,"score":2971},[2965,2966],{"name":2882,"color":2883},{"name":2914,"color":2915},10593,"@click listener on \u003Cnuxt-link> or \u003Crouter-link> no longer works inside page components on Vue 2.7","2023-02-08T19:37:35Z","https://github.com/nuxt/nuxt/issues/10593",0.7047288,{"labels":2973,"number":2978,"owner":2871,"repository":2871,"state":2917,"title":2979,"updated_at":2980,"url":2981,"score":2982},[2974,2975],{"name":2926,"color":2927},{"name":2976,"color":2977},"upstream-bug","B60205",13471,"onMounted hook running before DOM is available","2025-01-19T01:14:16Z","https://github.com/nuxt/nuxt/issues/13471",0.70528233,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fotTl1-5rh48Db3fWPoRDUfT6xVi0_P7nKZMWIgzl5kE":-1},"/nuxt/nuxt/23281"]