\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",[3073,3074,3075],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3076,"color":3077},"reka-ui","56d799",4257,"closed","[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.6186973,{"labels":3085,"number":3091,"owner":3029,"repository":3029,"state":3079,"title":3092,"updated_at":3093,"url":3094,"score":3095},[3086,3089,3090],{"name":3087,"color":3088},"3.x","29bc7f",{"name":3020,"color":3021},{"name":3045,"color":3046},12182,"ReferenceError: window is not defined","2023-01-19T15:59:20Z","https://github.com/nuxt/nuxt/issues/12182",0.72755903,{"description":3097,"labels":3098,"number":3102,"owner":3029,"repository":3029,"state":3079,"title":3103,"updated_at":3104,"url":3105,"score":3106},"Sorry if this is basic, but my understanding is that eslint-loader is (somehow) configured to fire up a Vue linter. I can't figure out exactly how that's done, but I see it working. No issues there. \r\n \r\nMy problem is that I'm using v-for in a component and I'm not using a key to track them. This is by my own design. I get warnings at compile time (\"component lists rendered with v-for should have explicit keys...\":) and I want to suppress the error. This is where I'm getting tripped-up because I'm not sure what the rule IDs actually are. \r\n \r\nIf I'm correct thatr the eslint plugin being loaded is [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue), the rule ID should be \"require-v-for-key\", but I've tried using the following eslintrc.js config with no luck. I still get the warnings.\r\n \r\n```\r\nmodule.exports = {\r\n root: true,\r\n parser: 'babel-eslint',\r\n env: {\r\n browser: true,\r\n node: true\r\n },\r\n extends: 'standard',\r\n // required to lint *.vue files\r\n plugins: [\r\n 'html'\r\n ],\r\n // add your custom rules here\r\n rules: {\r\n \"vue/require-v-for-key\": \"off\",\r\n \"require-v-for-key\": \"off\"\r\n },\r\n globals: {}\r\n}\r\n```\r\n\r\nAnyone happen to know why this doesn't suppress the warnings for me?\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/c956\">#c956\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3099],{"name":3100,"color":3101},"2.x","d4c5f9",1091,"Looking for help on configuring the Vue linter in the starter app","2023-01-18T15:40:44Z","https://github.com/nuxt/nuxt/issues/1091",0.7296056,{"description":3108,"labels":3109,"number":3112,"owner":3029,"repository":3030,"state":3079,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### Environment\n\n-Macbook Apple M2 Pro, macOS 15.3\nOn your site, when you select a date in the select by double-clicking on the date, the popover breaks and the calendar flies to the top corner of the page.\n\nhttps://github.com/user-attachments/assets/a1fa58d1-1f82-464e-8af9-fe044a6cf65b\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nopen site https://ui3.nuxt.dev/components/calendar#as-a-datepicker and try to select date\n\n### Description\n\nwhen you select date my click on date and second click in this date will brake popover, and calendar move top top left corner\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3110,3111],{"name":3020,"color":3021},{"name":3023,"color":3024},3283,"Calendar as a Datepicker","2025-02-10T14:13:24Z","https://github.com/nuxt/ui/issues/3283",0.7304899,{"description":3118,"labels":3119,"number":3123,"owner":3029,"repository":3029,"state":3079,"title":3124,"updated_at":3125,"url":3126,"score":3127},"\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",[3120],{"name":3121,"color":3122},"pending triage","E99695",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.7338191,{"description":3129,"labels":3130,"number":3134,"owner":3029,"repository":3029,"state":3079,"title":3135,"updated_at":3136,"url":3137,"score":3138},"### Environment\n\n\"nuxt\": \"^2.15.8\",\r\n\"vue\": \"^2.6.14\",\n\n### Reproduction\n\n\u003Cimg width=\"1130\" alt=\"image\" src=\"https://user-images.githubusercontent.com/26525599/216768984-1bdae6ea-6cb7-4ead-89c9-aadc0c3a6d5f.png\">\r\n\n\n### Describe the bug\n\nI have deleted all the. vue files and failed to solve this problem. I don't know how to troubleshoot the problem, which file has the problem, and there will be no error in startup. As long as I visit a page, I will be prompted with this error, but the second visit will not occur again. Only the first visit will have this error.\r\n\r\n\r\n\u003Cimg width=\"1130\" alt=\"image\" src=\"https://user-images.githubusercontent.com/26525599/216768979-9747d91a-a19a-4bf8-9c7a-1141c86ad97b.png\">\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3131,3132,3133],{"name":3121,"color":3122},{"name":3100,"color":3101},{"name":3051,"color":3052},18761," [Vue warn]: Do not use built-in or reserved HTML elements as component id: s ","2023-02-17T08:03:01Z","https://github.com/nuxt/nuxt/issues/18761",0.736336,{"description":3140,"labels":3141,"number":3142,"owner":3029,"repository":3143,"state":3079,"title":3144,"updated_at":3145,"url":3146,"score":3147},"When using with Nuxt rc 11, I'm getting the following warnings in SSR.\r\nInside \u003Cclient-only> the warning is not triggered. Warning is triggered once per component usage.\r\n\r\nI'm using it as expexted:\r\n\r\n```\r\n\u003CIcon name=\"ic:baseline-search\" />\r\n```\r\n\r\nIs there something that should be done, besides using \u003Cclient-only>?\r\n\r\n\r\nHere's what I'm being warned (Index.vue page)\r\n\r\n```\r\n[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka \"full build\"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.\r\n- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.\r\n- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\r\n- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom \r\n at \u003CIcon name=\"mdi:qrcode-scan\" > \r\n at \u003CIndex class=\"relative h-screen content-border pt-14\" onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C Proxy {__v_skip: true} > > \r\n at \u003CAnonymous key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined class=\"relative h-screen content-border pt-14\" > \r\n at \u003CNuxtPage class=\"relative h-screen content-border pt-14\" > \r\n at \u003CDefault > \r\n at \u003CAsyncComponentWrapper > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"layout\" mode=\"out-in\" > \r\n at \u003CAnonymous> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\r\n```",[],16,"icon","Warnings when in use with Nuxt rc-11","2022-09-29T12:33:30Z","https://github.com/nuxt/icon/issues/16",0.7365426,["Reactive",3149],{},["Set"],["ShallowReactive",3152],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3lgMjQ6glqQlh0o4WqgOtlnjs-CKiIfLU4rbhgE0cA4":-1},"/nuxt/ui/4392"]