\n\u003C/template>\n\n```\n\n**Minimal Reproduction**\nRepro created using Nuxt 3 + Nuxt UI 3 starter structure.\n\npackage.json:\n```json\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\",\n \"lint\": \"eslint .\",\n \"lint:fix\": \"eslint --fix .\"\n },\n \"dependencies\": {\n \"@iconify-json/lucide\": \"^1.2.44\",\n \"@iconify-json/simple-icons\": \"^1.2.35\",\n \"@nuxt/ui\": \"^3.1.1\",\n \"nuxt\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@nuxt/eslint\": \"^1.4.1\",\n \"eslint\": \"^9.27.0\",\n \"typescript\": \"^5.8.3\"\n }\n}\n```\n\nNotes\n\t•\tReproduces consistently in local dev.\n\t•\tDoes not reproduce on Codesandbox with the Nuxt UI 3 starter (possibly due to different runtime setup).\n\t•\tNo functional issues observed so far, but the warning pollutes the console.\n\t•\tThis warning has only recently started appearing in the console logs, despite no code changes to this component on our end — possibly introduced in a recent dependency update.\n",[2880,2883,2886],{"name":2881,"color":2882},"bug","d73a4a",{"name":2884,"color":2885},"v3","49DCB8",{"name":2887,"color":2888},"triage","ffffff",4257,"ui","[Vue warn] toRefs() expects a reactive object but received a plain one - \u003CUNavigationMenu />","2025-05-29T23:48:43Z","https://github.com/nuxt/ui/issues/4257",0.70349824,{"description":2896,"labels":2897,"number":2899,"owner":2871,"repository":2871,"state":2872,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.9.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.5.0`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `compatibilityDate`, `css`, `app`, `modules`, `runtimeConfig`, `vite`, `vueQuery`, `ui`, `icon`, `elementPlus`\n- Runtime Modules: `@nuxt/eslint@1.2.0`, `@nuxt/icon@1.11.0`, `@nuxt/scripts@0.11.2`, `@nuxt/test-utils@3.17.2`, `@nuxt/ui@3.0.2`, `@element-plus/nuxt@1.1.1`, `@hebilicious/vue-query-nuxt@0.3.0`, `@vueuse/nuxt@13.0.0`\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/purple-worker-q927r2?workspaceId=ws_Nd6bGHokakFXXgZBfRPLsD\n\n### Describe the bug\n\n**Steps to Reproduce:**\n\n1. Open the reproduction link.\n2. Click on 'page 2' at the top to navigate to the page2 page.\n3. The loading animation will not disappear.\n\nThe code logic of the page2 page is to call the `fetchData` function when the page is opened, while setting `loading` to true and then setting it to false within a short period.\n\nThis bug is triggered when a Nuxt page uses a transition with the mode set to `out-in`. Specifically, when the component's props change rapidly, the code related to DOM operations does not correctly handle the state of the props, resulting in abnormal component display.\n\nWorkaround:\n\n1. Set the mode to a value other than `out-in`.\n2. Wrap the component using `v-loading` with a `\u003CClientOnly>` component.\n3. Call `fetchData` within the `onMounted` callback.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```\n\nEdit: pick right words",[2898],{"name":2868,"color":2869},31613,"page transtion with fast props change","2025-04-02T03:30:33Z","https://github.com/nuxt/nuxt/issues/31613",0.706981,{"description":2905,"labels":2906,"number":2914,"owner":2871,"repository":2871,"state":2872,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### 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_",[2907,2910,2911],{"name":2908,"color":2909},"good first issue","fbca04",{"name":2881,"color":2882},{"name":2912,"color":2913},"🔨 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.71192116,{"description":2920,"labels":2921,"number":2925,"owner":2871,"repository":2890,"state":2872,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.0\n- Nitro Version: 2.11.8\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, css, build, supabase, content, pinia, devtools, debug, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui-pro@3.1.0, @vueuse/nuxt@13.1.0, @nuxt/content@3.5.1, @nuxt/icon@1.12.0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.6, @nuxt/test-utils@3.17.2, @nuxtjs/supabase@1.5.0, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CUForm :state=\"state\" class=\"w-1/2 p-4\">\n \u003CUFormField v-for=\"(item, index) in items\" :key=\"index\" :label=\"index\" :name=\"index\">\n \u003CUColorPicker v-if=\"index == 'color'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUSlider v-if=\"index == 'range' && typeof item == 'number'\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />\n \u003CUInput v-else :type=\"index\" v-model=\"state[index]\" :default-value=\"item\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003Cpre class=\"w-1/2 bg-gray-200 p-4 leading-14\"> {{ state }} \u003C/pre>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\nconst state = ref({}) // ISSUE: Default values are not loaded in the v-model\nconst items = {\n number: 50,\n reset: true, // ISSUE: UInput is not supporting boolean values for v-model\n submit: true, // ISSUE: UInput is not supporting boolean values for v-model\n search: \"search\",\n date: \"2025-04-25\",\n text: \"text\",\n color: \"#ccffcc\",\n button: true, // ISSUE: UInput is not supporting boolean values for v-model\n checkbox: false, // ISSUE: UInput is not supporting boolean values for v-model\n \"datetime-local\": \"2025-04-25T10:49:31\",\n email: \"nobody@gmail.com\",\n file: \"\",\n hidden: \"hidden\",\n image: \"image.svg\",\n month: \"2025-04\",\n password: \"topsecret\",\n radio: true, // ISSUE: UInput is not supporting boolean values for v-model\n range: 50, // Default value is displayed but not loaded in the v-model\n tel: \"0612345678\",\n time: \"10:49:31\",\n url: \"www.chatgpt.com\",\n week: \"2025-W16\"\n}\n// const state = reactive(items) // Workaround for default-value\n\u003C/script>\n```\n\n### Description\n\nI made a small comparison between `UInput` and other components like `UColorPicker` and `USlider` and I stumbled on a couple of issues.\n* `default-value` is not displayed except for `range` and `USlider`\n* `default-value` is never initialized in the `v-model`\n* Booleans are not supported in the `v-model` and I was therefore not able to make them reactive.\n\nWorkaround is to load the default value via the `state`, but that requires an additional step and is therefore not ideal for dynamic forms\n`const state = reactive(items)`\n\nWorkaround for working with booleans, but I am not sure how to apply the `v-model` yet🤔\n`\u003CUInput v-if=\"typeof state[index] == 'boolean'\" :type=\"index\" :value=\"index\" :checked=\"item\" />`\n\n\n### Additional context\n\nDefault values via `default-value`\n\nDefault value via `state`\n\n\n### Logs\n\n```shell-script\n\n```",[2922,2923,2924],{"name":2881,"color":2882},{"name":2884,"color":2885},{"name":2887,"color":2888},3983,"Default values are not loaded in the v-model","2025-05-05T16:31:01Z","https://github.com/nuxt/ui/issues/3983",0.71371365,{"labels":2931,"number":2938,"owner":2871,"repository":2871,"state":2939,"title":2940,"updated_at":2941,"url":2942,"score":2943},[2932,2934,2935],{"name":2933,"color":2888},"stale",{"name":2868,"color":2869},{"name":2936,"color":2937},"2.x","d4c5f9",7123,"closed","Loading indicator customization not working for default loader","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7123",0.6703137,{"description":2945,"labels":2946,"number":2952,"owner":2871,"repository":2890,"state":2939,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.7.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.0.4\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.6.1, @nuxt/ui@3.0.0-alpha.9, @storyblok/nuxt@6.2.0, @nuxt/image@1.8.1, @nuxt/scripts@0.9.5, @nuxtjs/seo@2.0.0-rc.23, nuxt-mapbox@1.6.1, dayjs-nuxt@2.1.11, @nuxtjs/algolia@1.10.2, @sentry/nuxt/module@8.37.1, nuxt-posthog@1.5.4\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\nNo Caching/ISR: https://preview.live-for-today.com - Icons All Load\nCaching/ISR: https://live-for-today.com - Some Icons Fail To Load\n\n### Description\n\nDev: localhost - Icons All Load\nNo Caching/ISR: https://preview.live-for-today.com - Icons All Load\nCaching/ISR: https://live-for-today.com - Some Icons Fail To Load\n\nOn the deployment with Caching/ISR I get this warnings in the console, i.e.:\n\n```[Icon] failed to load icon `heroicons:chevron-double-left```,\n\n```[Icon] failed to load icon `heroicons:chevron-double-right```\n\nI've installed all of the icon dependencies I'm using.\n\nSeems to be some conflict as soon as I'm using caching.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2947,2948,2951],{"name":2881,"color":2882},{"name":2949,"color":2950},"needs reproduction","CB47CF",{"name":2884,"color":2885},2731,"Icons Not Loading On v3 When Using ISR","2025-02-07T15:25:14Z","https://github.com/nuxt/ui/issues/2731",0.6927087,{"description":2958,"labels":2959,"number":2961,"owner":2871,"repository":2890,"state":2939,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.12.1\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.9.0\r\n- Builder: -\r\n- User Config: compatibilityDate, future, modules, i18n, security, hub, eslint, devtools, ssr\r\n- Runtime Modules: @nuxtjs/i18n@8.5.1, @nuxthub/core@0.7.4, @nuxt/ui@2.18.4, nuxt-auth-utils@0.3.6, @nuxt/eslint@0.5.2, nuxt-security@2.0.0-rc.9\n\n### Version\n\n^2.18.4\n\n### Reproduction\n\nOpen https://nuxt.com in a private browser to remove any caches. \r\n\r\n\n\n### Description\n\nWhen loading a Nuxt page, Icons take a very long time to load. When clicking buttons, spinners do not appear right away, when loading pages icons often appear late, when clicking the dark mode icon the light mode icon takes a long time to appear. \r\n\r\nThe suggested page to reproduce (I am using Safari):\r\n\r\n\u003Cimg width=\"1304\" alt=\"Screenshot 2024-09-05 at 22 41 33\" src=\"https://github.com/user-attachments/assets/321c6d2d-6632-42f1-8fc1-64b2695abe42\">\r\n\r\nThe load times. The top one taking a long time is the dark mode icon:\r\n\r\n\u003Cimg width=\"1228\" alt=\"Screenshot 2024-09-05 at 22 41 28\" src=\"https://github.com/user-attachments/assets/4513c7cf-492e-4ef1-9052-4469069e35c6\">\r\n\r\nWhen clicking the dark mode icon, the light mode icon that should appear in its place as it toggles is taking a long time to load too, leaving the user with an empty space while the loading takes place:\r\n\r\n\u003Cimg width=\"1319\" alt=\"image\" src=\"https://github.com/user-attachments/assets/3caf51a6-6b8c-460b-845f-15c8ba5db7b4\">\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2960],{"name":2881,"color":2882},2124,"Icons loading late and slow","2024-09-16T11:51:50Z","https://github.com/nuxt/ui/issues/2124",0.69530624,{"description":2967,"labels":2968,"number":2975,"owner":2871,"repository":2890,"state":2939,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\n- @nuxt/icon\": \"^1.12.0\n- nuxt\": \"^3.17.2\n\nThe `lucide:x` icon, which is used to close the menu dropdown, is not showing properly in the `UHeader` component. \n\n\u003Cimg width=\"581\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/94303477-706b-4568-9acf-97cfee257748\" />\n\n\u003Cimg width=\"592\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4773f3b1-c7ad-494b-8230-864007473db6\" />\n\n\nHowever, if i explicitly use the `lucide:x` icon somewhere in the pages, the icon in the header will show as normal.\n\nFor example, if I add `\u003CIcon name=\"lucide:x\" style=\"color: black\" />` to `pages/index.vue`, then the icons in both index page and the header show properly.\n\n\n\u003C!-- Failed to upload \"index.vue - nuxt-front [SSH_ macstudio] - Visual Studio Code 2025-05-15 10-37-38.mp4\" -->\n\nAlso see https://github.com/nuxt/icon/issues/251 and https://github.com/nuxt/ui/issues/3494\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.2\n\n### Reproduction\n\n[scienhub-com/nuxt-front](https://github.com/scienhub-com/nuxt-front)\n\n### Description\n\n1. clone the code\n2. install deps `npm i`\n3. run local dev: `npm run dev`\n4. go to browser, narrow down the page, let the menu icon in the header show up, click the menu bar, the close-menu icon (`lucide:x`) is supposed to show up, but actually not.\n\n## Other context\n\nI tried the comments from other issues like [https://github.com/nuxt/ui/issues/3494 and ](https://github.com/nuxt/icon/issues/259#issuecomment-2389235126) and https://github.com/nuxt/icon/issues/251#issuecomment-2331760499.\n\nThe behaviour is quite weird and I think this is related to the NuxtUI UHeader component. Because any icons elsewhere in the app are working well.\n",[2969,2970,2971,2974],{"name":2881,"color":2882},{"name":2884,"color":2885},{"name":2972,"color":2973},"nuxt/ui-pro","00dc82",{"name":2887,"color":2888},4158,"UHeader Icon not showing properly","2025-05-22T01:02:59Z","https://github.com/nuxt/ui/issues/4158",0.69618773,{"description":2981,"labels":2982,"number":2988,"owner":2871,"repository":2871,"state":2939,"title":2989,"updated_at":2990,"url":2991,"score":2992},"\n### Environment\n\nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.8\n- Builder: -\n- User Config: experimental, runtimeConfig, build, devtools, nitro, routeRules, plugins, modules, eslint, pinia, site, delayHydration, i18n, icon, app, content, svgo, sitemap, googleFonts, image, mdc, htmlValidator, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.18.4, @nuxt/image@1.8.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/google-fonts@3.2.0, @nuxtjs/fontaine@0.4.3, @nuxtjs/i18n@8.5.5, @nuxtjs/mdc@0.8.3, @nuxtjs/sitemap@6.1.0, @nuxtjs/html-validator@1.8.2, nuxt-delay-hydration@1.3.8, nuxt-svgo@4.0.6, @vueuse/nuxt@11.1.0, @vueuse/motion/nuxt@2.2.5, @pinia/nuxt@0.5.4, @nuxthq/studio@2.0.3, @nuxt/icon@1.5.1, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nGithub to reproduction: https://github.com/hoachnt/hoachnt-web\n\n### Describe the bug\n\nI don't know what problem is. I try to fix this bug 2 months and think that problem is in nuxt. And yep I saw in the official website of nuxt has same problem\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2983,2984,2985],{"name":2868,"color":2869},{"name":2949,"color":2913},{"name":2986,"color":2987},"possible regression","B90A42",29387,"Icons not rendering on production build when mounting","2024-10-15T06:27:30Z","https://github.com/nuxt/nuxt/issues/29387",0.6993212,["Reactive",2994],{},["Set"],["ShallowReactive",2997],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNiQmXD6806f8B3xyJHkIiBjOtVnCVVwBTw04zOrfwvo":-1},"/nuxt/ui/4162"]