\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",[2895],{"name":2869,"color":2870},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.69449925,{"description":2902,"labels":2903,"number":2906,"owner":2853,"repository":2853,"state":2855,"title":2907,"updated_at":2908,"url":2909,"score":2910},"I have this error, but I have checked all the. vue files and found no naming problems. There are only 10 vue files in total. It is easy to check all of them, but I just don't know why this error occurs. How do I know which file it is?\r\n\r\n\r\n",[2904,2905],{"name":2869,"color":2870},{"name":2872,"color":2873},10896,"Do not use built-in or reserved HTML elements as component id: s ","2023-03-17T21:45:05Z","https://github.com/nuxt/nuxt/issues/10896",0.69811505,{"description":2912,"labels":2913,"number":2917,"owner":2853,"repository":2918,"state":2855,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Description\n\nMultiple UCheckbox can share the same v-model by using an array like :\r\n\r\nhttps://vuetifyjs.com/en/components/checkboxes/#colors\r\n\r\n",[2914],{"name":2915,"color":2916},"question","d876e3",1740,"ui","UCheckbox v-model as array","2025-03-31T08:02:40Z","https://github.com/nuxt/ui/issues/1740",0.7046896,{"description":2924,"labels":2925,"number":2935,"owner":2853,"repository":2918,"state":2855,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.17.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.10.0\r\n- Builder: -\r\n- User Config: extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, runtimeConfig, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.1, @nuxt/fonts@0.7.2, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.1\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-9zrfga?file=app.vue\r\n\n\n### Description\n\nHi everyone.\r\nI truly appreciate your work. Many many thanks!!\r\nI'm starting a new project, my first project with \"nuxt\" and \"nuxt ui+pro\" (I liked the dashboard theme).\r\nMaybe I'm doing something wrong, in this case please help me.\r\nOtherwise I think I found an error in the theme of the UDashboardModal component.\r\n\r\nThe background of UDashboardModal does not follow the length of its content in \"mobile view\" (small devide, in this example 400x616).\r\n\r\n\r\n\r\nIn desktop viewport work as expected.\r\n\r\n\r\n\r\nWhat's do you think?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2926,2929,2932],{"name":2927,"color":2928},"bug","d73a4a",{"name":2930,"color":2931},"duplicate","cfd3d7",{"name":2933,"color":2934},"pro","5BD3CB",2220,"Issue Nuxt UI Pro UDashboardModal background ","2024-10-06T18:00:50Z","https://github.com/nuxt/ui/issues/2220",0.71212447,{"description":2941,"labels":2942,"number":2951,"owner":2853,"repository":2853,"state":2855,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Environment\n\nnuxt@latest\n\n### Reproduction\n\nhttps://nuxt.com/docs/examples/advanced/jsx#jsx-tsx\r\nofficial demo url ↑\n\n### Describe the bug\n\n\u003Cimg width=\"953\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/100112640/58c83a7c-ed7b-4fe4-a3c6-019fe27e8f1d\">\r\nI added the Ref variable using the official demo and got an warning\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2943,2946,2947,2948],{"name":2944,"color":2945},"3.x","29bc7f",{"name":2869,"color":2870},{"name":2885,"color":2886},{"name":2949,"color":2950},"closed-by-bot","ededed",22041,"[Vue warn]: [@vue/server-renderer] Invalid VNode type: undefined (undefined)","2023-08-06T01:48:24Z","https://github.com/nuxt/nuxt/issues/22041",0.71648,{"description":2957,"labels":2958,"number":2963,"owner":2853,"repository":2918,"state":2855,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Description\n\n\nHow to set v-model type of UCalendar\n`\n \u003CUCalendar\n v-model=\"datePickerValue\"\n range\n size=\"lg\"\n color=\"error\"\n weekday-format=\"short\"\n >\n \u003Ctemplate #heading=\"{ value }\">\n \u003Cdiv class=\"custom-heading\">\n \u003Ch2 class=\"text-sm font-medium text-[#3f3f3f] leading-tight\">\n {{ formatMonthYear(value) }}\n \u003C/h2>\n \u003C/div>\n \u003C/template>\n\n \u003C!-- Day 커스터마이즈 -->\n \u003Ctemplate #day=\"{ day }\">\n \u003Cdiv class=\"custom-day\">\n \u003Cspan\n :class=\"{\n 'text-sm font-semibold': isDaySelected(day),\n 'text-sm font-normal': !isDaySelected(day),\n }\"\n >{{ extractDay(day) }}\u003C/span\n >\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #week-day=\"{ day }\">\n \u003Cdiv class=\"custom-week-day bg-white border-none\">\n \u003Cspan class=\"font-medium text-xs text-[#7e7e7e]\">{{ day }}\u003C/span>\n \u003C!-- 예시: 요일을 간단하게 출력 -->\n \u003C/div>\n \u003C/template>\n \u003C/UCalendar>\n`\n\n`const datePickerValue = ref\u003C{ start: DateValue; end: DateValue }>({\n start: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n end: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n});`\n\nI put the above variable in v-model, but I get the following error. How should I declare the type?\n\n`'{ start: { readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCale...' 형식은 'DateRange' 형식에 할당할 수 없습니다.\n 'start' 속성의 형식이 호환되지 않습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식에 'ZonedDateTime' 형식의 #private, hour, minute, second 외 4개 속성이 없습니다.ts-plugin(2322)\nCalendar.vue(99, 3): 필요한 형식은 여기에서 '{ readonly \"onUpdate:modelValue\"?: ((date: DateRange | null) => any) | undefined; readonly \"onUpdate:placeholder\"?: ((...args: unknown[]) => any) | undefined; readonly \"onUpdate:startValue\"?: ((date: DateValue | undefined) => any) | undefined; ... 36 more ...; prevPage?: ((placeholder: DateValue) => DateValue) | und...' 형식에 선언된 'modelValue' 속성에서 가져옵니다.`",[2959,2960],{"name":2915,"color":2916},{"name":2961,"color":2962},"v3","49DCB8",3900,"How to set v-model type of UCalendar","2025-04-25T06:07:41Z","https://github.com/nuxt/ui/issues/3900",0.71670645,["Reactive",2969],{},["Set"],["ShallowReactive",2972],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOiv6bWBRvcO4C68A6GI1ab1JHsuS9vzZWNKPKB2Fwu4":-1},"/nuxt/scripts/448"]