\n\n\u003Cimg width=\"912\" height=\"578\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/71fb37a4-3959-413f-9076-74f63eee0108\" />\n\nNormal button:\n```html\n\u003CUButton\n color=\"info\"\n variant=\"soft\"\n size=\"xl\"\n icon=\"i-heroicons-question-mark-circle\"\n class=\"rounded-full\"\n aria-label=\"Show keyboard shortcuts\"\n />\n```\n\nIm using Nuxt4 and NuxtUI 3",[],416,"nuxt","icon","open","NuxtUI icons forced to width and height 1em!","2025-07-22T16:50:58Z","https://github.com/nuxt/icon/issues/416",0.71910495,{"description":3029,"labels":3030,"number":3031,"owner":3021,"repository":3032,"state":3023,"title":3033,"updated_at":3034,"url":3035,"score":3036},"I came across this a few days ago and just wanted to report. I landed on the website from google search result. \n\n\u003Cimg width=\"1428\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/730b6c9e-dcf5-4079-a1d1-eb357c343ce3\" />",[],1885,"nuxt.com","[Nuxt Website]: \u003Cno response> Failed to fetch","2025-05-03T08:24:49Z","https://github.com/nuxt/nuxt.com/issues/1885",0.746095,{"description":3029,"labels":3038,"number":3039,"owner":3021,"repository":3021,"state":3023,"title":3033,"updated_at":3040,"url":3041,"score":3036},[],31986,"2025-05-03T06:58:04Z","https://github.com/nuxt/nuxt/issues/31986",{"description":3043,"labels":3044,"number":3048,"owner":3021,"repository":3021,"state":3049,"title":3050,"updated_at":3051,"url":3052,"score":3053},"\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",[3045],{"name":3046,"color":3047},"pending triage","E99695",29002,"closed","(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.7368827,{"description":3055,"labels":3056,"number":3057,"owner":3021,"repository":3058,"state":3049,"title":3059,"updated_at":3060,"url":3061,"score":3062},"Since 0.11.2, I get this warning when building:\n\n```sh\nℹ Building for Nitro preset: node-server nuxi 2:32:52 PM\nℹ Building client... 2:32:52 PM\nℹ vite v6.3.5 building for production... 2:32:52 PM\nℹ ✓ 128 modules transformed. 2:32:54 PM\nℹ .nuxt/dist/client/manifest.json 1.06 kB │ gzip: 0.29 kB 2:32:54 PM\nℹ .nuxt/dist/client/_nuxt/error-500.CZqNkBuR.css 1.88 kB │ gzip: 0.72 kB 2:32:54 PM\nℹ .nuxt/dist/client/_nuxt/error-404.4oxyXxx0.css 3.56 kB │ gzip: 1.11 kB 2:32:54 PM\nℹ .nuxt/dist/client/_nuxt/entry.BM7779KP.css 12.41 kB │ gzip: 2.57 kB 2:32:54 PM\nℹ .nuxt/dist/client/_nuxt/Dwmq4gRZ.js 3.39 kB │ gzip: 1.54 kB 2:32:54 PM\nℹ .nuxt/dist/client/_nuxt/Cbms6whT.js 9.49 kB │ gzip: 3.80 kB 2:32:54 PM\nℹ .nuxt/dist/client/_nuxt/DBllaoxV.js 220.58 kB │ gzip: 63.10 kB 2:32:54 PM\nℹ ✓ built in 1.83s 2:32:54 PM\n✔ Client built in 1835ms 2:32:54 PM\nℹ Building server... 2:32:54 PM\nℹ vite v6.3.5 building SSR bundle for production... 2:32:54 PM\n\n[2:32:54 PM] WARN [plugin ssr-styles] node_modules/nuxt/dist/app/entry.js: [nuxt] Cannot extract styles for virtual:nuxt:%2Fhome%2Fprojects%2Fyqnimqgnjy.github%2F.nuxt%2Fnuxt-fonts-global.css. Its styles will not be inlined when server-rendering.\n```\n\n[Repro](https://stackblitz.com/edit/github-pbwpw5na?file=nuxt.config.ts)",[],616,"fonts","\"[nuxt] Cannot extract styles for [...]nuxt-fonts-global.css. Its styles will not be inlined when server-rendering.\"","2025-05-07T09:00:55Z","https://github.com/nuxt/fonts/issues/616",0.7382234,{"labels":3064,"number":3071,"owner":3021,"repository":3021,"state":3049,"title":3072,"updated_at":3073,"url":3074,"score":3075},[3065,3068],{"name":3066,"color":3067},"3.x","29bc7f",{"name":3069,"color":3070},"bug","d73a4a",12266,"[Vue warn]: Hydration node mismatch:","2024-10-25T10:19:24Z","https://github.com/nuxt/nuxt/issues/12266",0.7390014,{"description":3077,"labels":3078,"number":3079,"owner":3021,"repository":3022,"state":3049,"title":3080,"updated_at":3081,"url":3082,"score":3083},"\r\nHello, \r\nThanks for this wonderful module that makes it easier to use icons seamlessly in Nuxt.\r\nThere is need to fix the typo for **icon** under the _**attributes**_ section.",[],98,"Typo in readme","2023-08-17T10:45:48Z","https://github.com/nuxt/icon/issues/98",0.7401118,{"description":3085,"labels":3086,"number":3079,"owner":3021,"repository":3087,"state":3049,"title":3088,"updated_at":3089,"url":3090,"score":3083},"I am using the new nuxt/scripts module and a little confused. I want to enable the lemonsqueezy script globally, I have multiple pages where this is needed. How should I do this? the [docs](https://scripts.nuxt.com/scripts/payments/lemon-squeezy#example) tell me to do the below and I added this in my `app.vue`\r\n\r\n```html\r\n\u003Cscript setup>\r\nconst { Setup } = useScriptLemonSqueezy();\r\nonMounted(() => {\r\n Setup();\r\n});\r\n\u003C/script>\r\n```\r\n\r\nWhats happening\r\n\r\n1. `index.vue` pages opens the checkout overlay\r\n2. `[...productId].vue` pages open the checkout overlay if I open the page directly, but not when I navigate to this page from a `\u003CNuxtLink />` \r\n\r\nI thought this was an issue with the lemon.js script, but when I navigate to the product page from a NuxtLink, I can see `window.LemonSqueezy` has a been initiated which is confusing me even further, everything is working from both parties yet the checkout wont open in the overlay.\r\n\r\nHere's a repro - https://stackblitz.com/edit/github-zk9jpe?file=pages%2Findex.vue",[],"scripts","Weird behaviour with lemonsqueezy script from registry","2024-07-06T11:13:23Z","https://github.com/nuxt/scripts/issues/98",{"description":3092,"labels":3093,"number":3096,"owner":3021,"repository":3021,"state":3049,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: modules, devtools, app, vite, vue, css, postcss, nitro, build, typescript, runtimeConfig\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.2, @pinia/nuxt@0.5.1, @formkit/auto-animate/nuxt@0.8.1, nuxt-headlessui@1.1.5, nuxt-icon@0.6.8\r\n- Build Modules: -\r\n- latest firefox & chromium\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-pgrig4?file=app.vue\n\n### Describe the bug\n\nUsing v-bind together with style attribute on component root gives ```Hydration style mismatch``` warning:\r\n```\r\n- rendered on server: style=\"padding:100px;--938b83b0-test:100;--938b83b0-test2:red;\"\r\n- expected on client: style=\"padding:100px;\"\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3094,3095],{"name":3066,"color":3067},{"name":3046,"color":3047},25588,"Hydration style mismatch: v-bind and style attribute on component root","2024-02-02T10:24:04Z","https://github.com/nuxt/nuxt/issues/25588",0.7430231,{"description":3102,"labels":3103,"number":3112,"owner":3021,"repository":3021,"state":3049,"title":3113,"updated_at":3114,"url":3115,"score":3116},"### Environment\n\nNuxt 3.9\n\n### Reproduction\n\nI tried to upgrade from 3.8.2 to 3.9 using ```nuxi upgrade```\n\n### Describe the bug\n\nI've run into issue that was not present in 3.8.2:\r\n\r\n Hydration **style** mismatch on \u003C div class...>…\u003C/div> // etc, replaced upon pasting\r\n - rendered on server: style=\"font-size:16px;--spacing:12px;\"\r\n - expected on client: style=\"font-size: 16px; --spacing: 12px\"\r\n\r\nWhat's even more weird is that these properties actually comes from simple props with default values:\r\n(Component simplified for showcase)\r\n```js\r\nwithDefaults(defineProps\u003CProps>(), {\r\n width: 16,\r\n spacing: 12,\r\n});\r\n```\r\n```html\r\n\u003Cdiv :style=\"`font-size: ${width}px; --spacing: ${spacing}px`\" />\r\n```\r\n\r\nIn another component, if style is generated by computed(), it also returns hydration style mismatch.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3104,3105,3106,3109],{"name":3066,"color":3067},{"name":3046,"color":3047},{"name":3107,"color":3108},"upstream","E8A36D",{"name":3110,"color":3111},"needs reproduction","FBCA04",25045,"[Nuxt 3.9] - Hydration STYLE mismatch","2024-01-05T08:42:27Z","https://github.com/nuxt/nuxt/issues/25045",0.743611,["Reactive",3118],{},["Set"],["ShallowReactive",3121],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxlcg6wYO6mutgsR6fqZ6UsiDoAn7T93fUR_ljqeZkv4":-1},"/nuxt/icon/141"]