\n \u003CTeleport defer to=\"main\">\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/Teleport>\n \u003C/div>\n\u003C/template>\n```\n\n### Describe the bug\n\nUsing the \u003CNuxtLayout> component within a deferred Teleport consistently throws the following warning in the console:\n\n```\n WARN [nuxt] Your project has pages but the \u003CNuxtPage /> component has not been used. You might be using the \u003CRouterView /> component instead, which will not work correctly in Nuxt. You can set pages: false in nuxt.config if you do not wish to use the Nuxt vue-router integration.\n```\n\nThis does not occur if the Teleport is not deferred, but I need to defer it for my use case. It also does not occur if `ssr: false` is specified, so I assume the `app:rendered` and `app:suspense:resolve` hooks are probably [relevant](https://github.com/nuxt/nuxt/blob/edc299a04344897ac110aca3b3a2c2705b0cef35/packages/nuxt/src/pages/runtime/plugins/check-if-page-unused.ts#L22). \n\nVue lets me suppress the inevitable hydration mismatch warning with `\u003Cmain data-allow-mismatch=\"children\" />`, but Nuxt does not let me suppress the warning, so it clutters the console.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3038,3041],{"name":3039,"color":3040},"pending triage","E99695",{"name":3042,"color":3043},"dx","C39D69",30001,"\u003CNuxtLayout> within \u003CTeleport defer> throws warning: \"Your project has pages but the \u003CNuxtPage /> component is not being used\"","2024-11-27T15:13:13Z","https://github.com/nuxt/nuxt/issues/30001",0.6991286,{"description":3050,"labels":3051,"number":3056,"owner":3028,"repository":3028,"state":3030,"title":3057,"updated_at":3058,"url":3059,"score":3060},"## Description\n\nHi, Iโm working on a Nuxt 3 project deployed on Vercel. Iโm experiencing an unwanted **white flash** or **layout flicker** on navigation between pages, especially when using `\u003CNuxtLink>` inside the navbar. The transition feels broken or unpolished.\n\nI already use default Nuxt page transitions like this:\n\n```css\n.page-enter-active,\n.page-leave-active {\n transition: all 0.4s;\n}\n.page-enter-from,\n.page-leave-to {\n opacity: 0;\n filter: blur(1rem);\n}\n```\nMy app layout includes the navbar and footer outside of `\u003CNuxtPage />` 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",[3052,3053],{"name":3039,"color":3040},{"name":3054,"color":3055},"needs reproduction","FBCA04",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.70680135,{"description":3062,"labels":3063,"number":3066,"owner":3028,"repository":3028,"state":3067,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Environment\n\nDevelopment\n\n### Reproduction\n\n- Run your app with layouts\n- Do not use a layout\n- Have this warning in browser's console : \n`[nuxt] Your project has layouts but the `\u003CNuxtLayout />` component has not been used.`\n\n### Describe the bug\n\nCan't find option to disable the warning on nuxt config or documentation.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3064,3065],{"name":3039,"color":3040},{"name":3054,"color":3055},30705,"closed","How to disable \"check-if-layout-used.js\" warning ?","2025-03-24T23:07:06Z","https://github.com/nuxt/nuxt/issues/30705",0.67992437,{"description":3073,"labels":3074,"number":3076,"owner":3028,"repository":3028,"state":3067,"title":3077,"updated_at":3078,"url":3079,"score":3080},"\r\n**(Need Help) Encountering Warnings When Using Nuxt3 + shadcnUI and Unsure How to Fix Them**\r\n\r\nHereโs the component code:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, VisuallyHidden } from \"radix-vue\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"index-side-bar\">\r\n \u003Cslot />\r\n \u003CSheet :default-open=\"true\">\r\n \u003CSheetContent :side=\"'left'\" class=\"outline-0 p-0 w-[240px] z-[99999]\">\r\n \u003CVisuallyHidden>\r\n \u003CSheetHeader>\r\n \u003CSheetTitle>dialog\u003C/SheetTitle>\r\n \u003CSheetDescription>description\u003C/SheetDescription>\r\n \u003C/SheetHeader>\r\n \u003C/VisuallyHidden>\r\n \u003Cdiv style=\"width: 100%; height: 100vh; display: flex; flex-direction: column;\">\r\n \u003C!-- Header -->\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center sm:h-[48px]\">\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center ml-[14px] sm:ml-[16px]\">\r\n \u003Cdiv class=\"w-10 h-10 flex items-center justify-center sm:hidden\">\r\n \u003C!-- SVG Icon Placeholder -->\r\n \u003C/div>\r\n \u003Cdiv class=\"w-[120px] h-[56px] sm:w-auto sm:h-[48px]\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n \u003Cdiv class=\"w-[94px] h-[30px]\">\r\n \u003C!-- Logo Placeholder -->\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C!-- Footer -->\r\n \u003Cdiv class=\"sidebar_toolbar\">\r\n \u003CSheetClose class=\"outline-0\">\r\n \u003CNuxtLayout name=\"tab-toolbar-nav-menu\" />\r\n \u003C/SheetClose>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/SheetContent>\r\n \u003C/Sheet>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nShadcnUI Sheet.vue:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';\r\n\r\nconst props = defineProps\u003CDialogRootProps>();\r\nconst emits = defineEmits\u003CDialogRootEmits>();\r\nconst forwarded = useForwardPropsEmits(props, emits);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CDialogRoot v-bind=\"forwarded\">\r\n \u003Cslot />\r\n \u003C/DialogRoot>\r\n\u003C/template>\r\n```\r\n\r\n**The warning message:**\r\n\r\n```text\r\n[Vue warn]: Extraneous non-props attributes (data-v-e01f9c95) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\r\n at \u003CDialogRoot defaultOpen=true onUpdate:open=fn data-v-e01f9c95=\"\" >\r\n at \u003CSheet default-open=true >\r\n at \u003CSideBar ref=Ref\u003C undefined > >\r\n```\r\n\r\nThis warning has appeared multiple times and only occurs on the server side. No warnings appear on the client side.\r\n\r\nThrough testing, I found that switching to the `DialogRoot` component eliminates the warnings. The warnings reappear when using the `Sheet` component.\r\n\r\nHereโs the alternative component:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, VisuallyHidden } from \"radix-vue\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"index-side-bar\">\r\n \u003Cslot />\r\n \u003CDialogRoot :default-open=\"true\">\r\n \u003CSheetContent :side=\"'left'\" class=\"outline-0 p-0 w-[240px] z-[99999]\">\r\n \u003CVisuallyHidden>\r\n \u003CSheetHeader>\r\n \u003CSheetTitle>dialog\u003C/SheetTitle>\r\n \u003CSheetDescription>description\u003C/SheetDescription>\r\n \u003C/SheetHeader>\r\n \u003C/VisuallyHidden>\r\n \u003Cdiv style=\"width: 100%; height: 100vh; display: flex; flex-direction: column;\">\r\n \u003C!-- Header -->\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center sm:h-[48px]\">\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center ml-[14px] sm:ml-[16px]\">\r\n \u003Cdiv class=\"w-10 h-10 flex items-center justify-center sm:hidden\">\r\n \u003C!-- SVG Icon Placeholder -->\r\n \u003C/div>\r\n \u003Cdiv class=\"w-[120px] h-[56px] sm:w-auto sm:h-[48px]\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n \u003Cdiv class=\"w-[94px] h-[30px]\">\r\n \u003C!-- Logo Placeholder -->\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C!-- Footer -->\r\n \u003Cdiv class=\"sidebar_toolbar\">\r\n \u003CSheetClose class=\"outline-0\">\r\n \u003CNuxtLayout name=\"tab-toolbar-nav-menu\" />\r\n \u003C/SheetClose>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/SheetContent>\r\n \u003C/DialogRoot>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n**When using DevTools**, the same warning occurs, similar to the server-side warning, but it doesnโt appear on the client side:\r\n\r\n```text\r\n[Vue warn]: Extraneous non-props attributes (data-v-inspector) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\r\n at \u003CDialogRoot default-open=true data-v-inspector=\"layouts/index/SideBar.vue:16:7\" >\r\n at \u003CSideBar data-v-inspector=\"app.vue:4:7\" ref=Ref\u003C undefined > >\r\n at \u003CLayoutLoader key=\"index-side-bar\" layoutProps= { 'data-v-inspector': 'app.vue:4:7',\r\n```\r\n\r\nI have already disabled DevTools with `componentInspector: false`.\r\n\r\nGitHub link: [Nuxt DevTools Issue #722](https://github.com/nuxt/devtools/issues/722).\r\n",[3075],{"name":3039,"color":3040},29002,"(Need Help) Encountering Warnings When Using Nuxt3 + shadcnUI and Unsure How to Fix Them","2024-09-17T08:13:28Z","https://github.com/nuxt/nuxt/issues/29002",0.68579304,{"description":3082,"labels":3083,"number":3090,"owner":3028,"repository":3028,"state":3067,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.10.0`\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: `bun@1.1.26`\r\n- Builder: `-`\r\n- User Config: `experimental`, `devtools`, `modules`, `ssr`, `tailwindcss`, `routeRules`, `router`, `hooks`, `electron`, `imports`, `runtimeConfig`, `nitro`\r\n- Runtime Modules: `nuxt-electron@0.7.0`, `@nuxtjs/tailwindcss@6.12.1`, `nuxt-icon@0.6.10`, `@vueuse/nuxt@10.11.1`, `@nuxt/image@1.7.1`, `@pinia/nuxt@0.5.4`, `unplugin-icons/nuxt`, `@vueuse/motion/nuxt@2.2.3`, `floating-vue/nuxt`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/primefaces/primevue/issues/6283\n\n### Describe the bug\n\nWhen using `custom` with NuxtLink, like so:\r\n```vue\r\n \u003CNuxtLink\r\n v-slot=\"{ navigate, isActive }\"\r\n :to=\"item.href\"\r\n custom\r\n />\r\n```\r\n\r\n\r\nthe browser console throws following warning:\r\n\r\n```\r\nExtraneous non-emits event listeners (pointerenter, focus) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the \"emits\" option. \r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3084,3085,3088],{"name":3019,"color":3020},{"name":3086,"color":3087},"pages","00DFB5",{"name":3089,"color":3055},"๐จ p3-minor",28732,"NuxtLink with custom directive is throwing console warning","2024-08-28T11:32:00Z","https://github.com/nuxt/nuxt/issues/28732",0.6902032,{"description":3096,"labels":3097,"number":3102,"owner":3028,"repository":3028,"state":3067,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Version\n\n[v2.6.3](https://github.com/nuxt.js/releases/tag/v2.6.3)\n\n### Reproduction link\n\n[https://nuxtjs.org](https://nuxtjs.org)\n\n### Steps to reproduce\n\ni thinks it happen when migrate to nuxt 2.x version from any version\n\n### What is expected ?\n\nnot appearing โ Nuxt Warning\n\n### What is actually happening?\n\n\n โญโโโโโโโโโโโโโโโโโโโโโโโโโโโโฎ\n โ โ\n โ โ Nuxt Warning โ\n โ โ\n โ The command 'nuxt build' finished but did not exit after 5s โ \n โ โ \n โ This is most likely not caused by a bug in Nuxt.js โ \n โ โ \n โ Make sure to cleanup all timers and listeners you or your โ\n โ plugins/modules start. โ\n โ Nuxt.js will now force exit โ\n โ โ\n โ DeprecationWarning: Starting with Nuxt version 3 this will . โ\n โ be a fatal error โ\n โ \n โฐโโโโโโโโโโโโโโโโโโโโโโโโโโโโฏ\n\n### Additional comments?\n\ni have no idea from warning message `Make sure to cleanup all timers and listeners you or your plugins/modules start`.\n\ni already check out pluggins and module directory i wrote before, \nbut there's no timer/interval expressions.\n\n how can i found cause of this things?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\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/c9167\">#c9167\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3098,3099],{"name":3039,"color":3040},{"name":3100,"color":3101},"2.x","d4c5f9",5669,"How do i fix Nuxt Warning 'nuxt build finished but did not exit after 5s'?","2023-01-22T15:33:07Z","https://github.com/nuxt/nuxt/issues/5669",0.694221,{"description":3108,"labels":3109,"number":3118,"owner":3028,"repository":3028,"state":3067,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\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/edit/nuxt-issues-25196\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CClientOnly>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen using a `\u003CClientOnly>` component around the `App.vue` (only SSR the app shell), the NuxtLayout warning will appear even though the component is used.\r\n\r\n### Additional context\r\n\r\nRelated: https://github.com/nuxt/nuxt/issues/24912\r\n\r\n### Logs\r\n\r\n_No response_",[3110,3113,3114,3115],{"name":3111,"color":3112},"3.x","29bc7f",{"name":3042,"color":3043},{"name":3019,"color":3020},{"name":3116,"color":3117},"๐ฐ p2-nice-to-have","0E8A16",25196,"`\u003CNuxtLayout /> component has not been used.` Warning when using `\u003CClientOnly>` in `app.vue`","2024-02-09T20:33:36Z","https://github.com/nuxt/nuxt/issues/25196",0.6944938,{"description":3124,"labels":3125,"number":3131,"owner":3028,"repository":3029,"state":3067,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\n\n```\n System:\n OS: macOS 15.5\n CPU: (14) arm64 Apple M3 Max\n Memory: 555.83 MB / 36.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 23.11.0 - /opt/homebrew/bin/node\n Yarn: 1.22.22 - /opt/homebrew/bin/yarn\n npm: 10.9.2 - /opt/homebrew/bin/npm\n pnpm: 9.12.3 - /opt/homebrew/bin/pnpm\n Watchman: 2025.04.28.00 - /opt/homebrew/bin/watchman\n npmPackages:\n nuxt: ^3.17.3 => 3.17.4 \n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.4\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using the UNavigationMenu component from Nuxt UI 3 in a fresh Nuxt 3 app, the following warning appears in the browser console:\n\n```shell-script\n> [Vue warn] toRefs() expects a reactive object but received a plain one.\n```\n\nThis occurs even when rendering the component barebones:\n\n**pages/index.vue:**\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\nconst items = ref\u003CNavigationMenuItem[]>([\n {\n label: 'Guide',\n icon: 'i-lucide-book-open',\n to: '/getting-started',\n children: [\n {\n label: 'Introduction',\n description: 'Fully styled and customizable components for Nuxt.',\n icon: 'i-lucide-house'\n },\n {\n label: 'Installation',\n description: 'Learn how to install and configure Nuxt UI in your application.',\n icon: 'i-lucide-cloud-download'\n },\n {\n label: 'Icons',\n icon: 'i-lucide-smile',\n description: 'You have nothing to do, @nuxt/icon will handle it automatically.'\n },\n {\n label: 'Colors',\n icon: 'i-lucide-swatch-book',\n description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'\n },\n {\n label: 'Theme',\n icon: 'i-lucide-cog',\n description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'\n }\n ]\n },\n {\n label: 'Composables',\n icon: 'i-lucide-database',\n to: '/composables',\n children: [\n {\n label: 'defineShortcuts',\n icon: 'i-lucide-file-text',\n description: 'Define shortcuts for your application.',\n to: '/composables/define-shortcuts'\n },\n {\n label: 'useOverlay',\n icon: 'i-lucide-file-text',\n description: 'Display a modal/slideover within your application.',\n to: '/composables/use-overlay'\n },\n {\n label: 'useToast',\n icon: 'i-lucide-file-text',\n description: 'Display a toast within your application.',\n to: '/composables/use-toast'\n }\n ]\n },\n {\n label: 'Components',\n icon: 'i-lucide-box',\n to: '/components',\n active: true,\n children: [\n {\n label: 'Link',\n icon: 'i-lucide-file-text',\n description: 'Use NuxtLink with superpowers.',\n to: '/components/link'\n },\n {\n label: 'Modal',\n icon: 'i-lucide-file-text',\n description: 'Display a modal within your application.',\n to: '/components/modal'\n },\n {\n label: 'NavigationMenu',\n icon: 'i-lucide-file-text',\n description: 'Display a list of links.',\n to: '/components/navigation-menu'\n },\n {\n label: 'Pagination',\n icon: 'i-lucide-file-text',\n description: 'Display a list of pages.',\n to: '/components/pagination'\n },\n {\n label: 'Popover',\n icon: 'i-lucide-file-text',\n description: 'Display a non-modal dialog that floats around a trigger element.',\n to: '/components/popover'\n },\n {\n label: 'Progress',\n icon: 'i-lucide-file-text',\n description: 'Show a horizontal bar to indicate task progression.',\n to: '/components/progress'\n }\n ]\n },\n {\n label: 'GitHub',\n icon: 'i-simple-icons-github',\n badge: '3.8k',\n to: 'https://github.com/nuxt/ui',\n target: '_blank'\n },\n {\n label: 'Help',\n icon: 'i-lucide-circle-help',\n disabled: true\n }\n])\n\u003C/script>\n\u003Ctemplate>\n \u003CUNavigationMenu :items=\"items\" class=\"w-full justify-center\" />\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",[3126,3127,3128],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3129,"color":3130},"reka-ui","56d799",4257,"[Vue warn] toRefs() expects a reactive object but received a plain one - \u003CUNavigationMenu />","2025-06-10T14:16:02Z","https://github.com/nuxt/ui/issues/4257",0.6958702,{"description":3137,"labels":3138,"number":3141,"owner":3028,"repository":3028,"state":3067,"title":3142,"updated_at":3143,"url":3144,"score":3145},"### Environment\n\n*package.json*\n```js\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 },\n \"dependencies\": {\n \"@prisma/nuxt\": \"^0.1.2\",\n \"@vueuse/core\": \"^12.0.0\",\n \"@vueuse/nuxt\": \"^12.0.0\",\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@nuxt/devtools\": \"npm:@nuxt/devtools-edge@latest\",\n \"@nuxtjs/tailwindcss\": \"^6.12.2\",\n \"@prisma/client\": \"^6.0.1\",\n \"prisma\": \"^6.0.1\"\n }\n}\n\n```\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-uquybs?file=nuxt.config.ts,app.vue\n\n### Describe the bug\n\nI have this code that should submit a form but I added `submit.prevent=\"handleSubmit()\"` so this should stop from refreshing.\n\nI tried to reproduce it on stackblitz however everything is working there (including the devtools) but on my local upon clicking create button the page refreshes.\n\n\n\n```html\n\u003Ctemplate>\n\u003Cform @submit.prevent=\"handleSubmit()\" class=\"w-full\">\n\t\u003Cdiv class=\"mb-4\">\n\t\t\u003Cinput\n\t\t\tv-model=\"form.email\"\n\t\t\ttype=\"email\"\n\t\t\tid=\"email\"\n\t\t\tclass=\"w-full p-3 border border-gray-300 rounded mt-1\"\n\t\t\tplaceholder=\"Email address\"\n\t\t/>\n\t\u003C/div>\n\t\u003Cdiv class=\"mb-6\">\n\t\t\u003Cinput\n\t\t\tv-model=\"form.password\"\n\t\t\ttype=\"password\"\n\t\t\tid=\"password\"\n\t\t\tclass=\"w-full p-3 border border-gray-300 rounded mt-1\"\n\t\t\tplaceholder=\"Password\"\n\t\t/>\n\t\u003C/div>\n\t\u003Cdiv class=\"mb-6\">\n\t\t\u003Cinput\n\t\t\tv-model=\"form.confirm_password\"\n\t\t\ttype=\"confirm_password\"\n\t\t\tid=\"confirm_password\"\n\t\t\tclass=\"w-full p-3 border border-gray-300 rounded mt-1\"\n\t\t\tplaceholder=\"Password Confirmation\"\n\t\t/>\n\t\u003C/div>\n\t\u003Cbutton\n\t\ttype=\"submit\"\n\t\tclass=\"w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700\"\n\t>\n\t\tCreate\n\t\u003C/button>\n\u003C/form>\n\u003C/template>\n\u003Cscript setup>\nconst handleSubmit = async () => {\n\t\n\tif (form.value.password !== form.value.confirm_password) {\n\t\tconsole.log(\"Passwords do not match\");\n\t\talert(\"Passwords do not match\");\n\t\treturn;\n\t}\n\n\tconsole.log(form.value);\n};\n...\n```\n\nhttps://github.com/user-attachments/assets/18ea3431-cadb-4613-a2a3-4703755f2f91\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3139,3140],{"name":3039,"color":3040},{"name":3054,"color":3055},30185,"Page refresh bug","2025-02-03T14:25:51Z","https://github.com/nuxt/nuxt/issues/30185",0.69626194,["Reactive",3147],{},["Set"],["ShallowReactive",3150],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDh3EFWrJmEvdJ2t9xAqu5OSJ1mCEHup2rqxhPylcm2Y":-1},"/nuxt/ui/4580"]