\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",[2865,2868,2871],{"name":2866,"color":2867},"bug","d73a4a",{"name":2869,"color":2870},"v3","49DCB8",{"name":2872,"color":2873},"triage","ffffff",4257,"nuxt","ui","open","[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.76158965,{"description":2883,"labels":2884,"number":2895,"owner":2875,"repository":2875,"state":2896,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.16.1\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.10\r\n- Builder: vite\r\n- User Config: devtools, imports, modules, css, svgo, i18n, headlessui, image, components, extends, runtimeConfig, linkChecker, googleFonts, build, vite\r\n- Runtime Modules: @nuxtjs/eslint-module@4.1.0, @pinia/nuxt@0.4.11, @nuxtjs/i18n@8.0.0-beta.13, nuxt-svgo@3.4.0, nuxt-headlessui@1.1.4, @nuxt/image@1.0.0-rc.1, nuxt-typed-router@3.2.5, @formkit/nuxt@0.17.5, @nuxtjs/tailwindcss@6.8.0, nuxt-icon@0.4.2, @nuxtjs/google-fonts@3.0.2, @vueuse/nuxt@10.3.0\r\n- Build Modules: -\n\n### Reproduction\n\n[Stackblitz reproduction link](https://stackblitz.com/edit/github-6gkd6t?file=app.vue)\r\n\r\n1. Add plugin exactly the same as in [docs about providing helpers](https://nuxt.com/docs/guide/directory-structure/plugins#automatically-providing-helpers)\r\n2. Use `const { $hello } = useNuxtApp()` in .client component\r\n3. Look at the warn in the browser console - `[Vue warn]: setup() return property \"$hello\" should not start with \"$\" or \"_\" which are reserved prefixes for Vue internals. `\n\n### Describe the bug\n\nI'm getting [Vue warn]: setup() return property \"$hello\" should not start with \"$\" or \"_\" which are reserved prefixes for Vue internals when using .client component.\r\nWhen using \"normal\" component (without .client extension) there is no warn and everything works as expected\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2885,2888,2889,2892],{"name":2886,"color":2887},"3.x","29bc7f",{"name":2866,"color":2867},{"name":2890,"color":2891},"🔨 p3-minor","FBCA04",{"name":2893,"color":2894},"✨ good reproduction","fbca04",22435,"closed","I'm getting [Vue warn]: setup() return property \"$hello\" should not start with \"$\" or \"_\" which are reserved prefixes for Vue internals when using .client component","2024-01-02T21:04:59Z","https://github.com/nuxt/nuxt/issues/22435",0.7227215,{"description":2902,"labels":2903,"number":1575,"owner":2875,"repository":2904,"state":2896,"title":2905,"updated_at":2906,"url":2907,"score":2908},"This might be more of a question type issue due to missing knowledge on my end.\r\n\r\nI tried setting up the module to replace our current google font dependency:\r\n`@import url(\"https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap\")`\r\n\r\nHowever when comparing the font output I noticed that google downloads a single 27kb woff2 file while nuxt/fonts creates 5 distinct woff files, ~40kb each -> 200kb.\r\nAfter a bit of searching I learned about [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts) and `Encode Sans` seems to be one of them.\r\n\r\nSo the question would be whether there is some sort of special config needed to make variable font's work properly? That is assuming the cause for the discrepancy is variable fonts of course.\r\n\r\nThanks!\r\n\r\nThis is the config used:\r\n```ts\r\nfonts: {\r\n\tfamilies: [{ name: \"Encode Sans\", provider: \"google\" }],\r\n\tdefaults: {\r\n\t\tweights: [100, 200, 300, 400, 500, 600, 700, 800, 900],\r\n\t\tstyles: [\"normal\"],\r\n\t\tsubsets: [\"cyrillic-ext\", \"cyrillic\", \"greek-ext\", \"greek\", \"vietnamese\", \"latin-ext\", \"latin\"],\r\n\t},\r\n\r\n\tassets: {\r\n\t\tprefix: \"/_fonts\",\r\n\t},\r\n},\r\n```\r\n",[],"fonts","variable fonts support","2024-02-23T21:57:41Z","https://github.com/nuxt/fonts/issues/13",0.74835014,{"labels":2910,"number":2915,"owner":2875,"repository":2875,"state":2896,"title":2916,"updated_at":2917,"url":2918,"score":2919},[2911,2912],{"name":2886,"color":2887},{"name":2913,"color":2914},"pending triage","E99695",13894,"custom attrs in \u003CHtml> component","2023-01-19T17:09:15Z","https://github.com/nuxt/nuxt/issues/13894",0.75299126,{"description":2921,"labels":2922,"number":2924,"owner":2875,"repository":2875,"state":2896,"title":2925,"updated_at":2926,"url":2927,"score":2928},"\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",[2923],{"name":2913,"color":2914},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.7547555,{"description":2930,"labels":2931,"number":2940,"owner":2875,"repository":2875,"state":2896,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### What problem does this feature solve?\r\n\r\nThe `layout` property should only allow strings and functions. If you set the layout to an `array` (for example), no error is shown. Only a Warning (coming from Vue directly): \r\n\r\n```\r\n[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.\r\n\r\n(found in \u003CRoot>)\r\n```\r\n\r\nA decent error message would be great to see here!\r\n\r\nTo get started, the source code for setting and evaluating the layout is [here](https://github.com/nuxt/nuxt.js/blob/dev/lib/app/App.js#L82)\r\n\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7888\">#c7888\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2932,2935,2937],{"name":2933,"color":2934},"enhancement","8DEF37",{"name":2936,"color":2894},"good first issue",{"name":2938,"color":2939},"2.x","d4c5f9",4035,"Throw an error when `layout` is no string","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/4035",0.7555142,{"labels":2946,"number":2955,"owner":2875,"repository":2875,"state":2896,"title":2956,"updated_at":2957,"url":2958,"score":2959},[2947,2950,2951,2952],{"name":2948,"color":2949},"documentation","5319e7",{"name":2886,"color":2887},{"name":2866,"color":2867},{"name":2953,"color":2954},"🍰 p2-nice-to-have","0E8A16",13376,"Improve warning about `definePageMeta()` outside `setup`","2023-10-21T08:51:28Z","https://github.com/nuxt/nuxt/issues/13376",0.75740904,{"description":2961,"labels":2962,"number":2969,"owner":2875,"repository":2970,"state":2896,"title":2971,"updated_at":2972,"url":2973,"score":2974},"- [ ] Add Custom Button class (responsive + look)\n- [ ] Add Custom Form Input class",[2963,2966],{"name":2964,"color":2965},"design","00bd6f",{"name":2967,"color":2968},"dev","018415",1340,"nuxt.com","UI Configuration","2023-10-10T14:44:52Z","https://github.com/nuxt/nuxt.com/issues/1340",0.76013815,{"labels":2976,"number":2979,"owner":2875,"repository":2875,"state":2896,"title":2980,"updated_at":2981,"url":2982,"score":2983},[2977,2978],{"name":2913,"color":2914},{"name":2938,"color":2939},6645,"Build removes style tags inside template","2023-01-22T15:34:46Z","https://github.com/nuxt/nuxt/issues/6645",0.7614479,{"description":2985,"labels":2986,"number":2989,"owner":2875,"repository":2875,"state":2896,"title":2990,"updated_at":2991,"url":2992,"score":2993},"### Version\n\n[v2.5.1](https://github.com/nuxt.js/releases/tag/v2.5.1)\n\n### Reproduction link\n\n[https://not-needed.com](https://not-needed.com)\n\n### Steps to reproduce\n\n```bash\n$ npx create-nuxt-app nuxt-app\n$ cd nuxt-app\n```\n\nModify `/pages/index.vue`.\n\n```vue\n\u003Ctemplate>\n \u003Csection class=\"container\">\n {{ name }}\n \u003C/section>\n\u003C/template>\n\n\u003Cscript>\nclass Sample {\n static NAME = 'Alice'\n}\n\nexport default {\n data() {\n return {\n name: Sample.NAME\n }\n }\n}\n\u003C/script>\n```\n\nStart Nuxt.js app\n\n```bash\n$ npm run dev\n```\n\n\n### What is expected ?\n\nStart the application and create the instance having data: `{name: 'Alice'}`.\n\n### What is actually happening?\n\nThrow an Error: SyntaxError Unexpected token export\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/c8946\">#c8946\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2987,2988],{"name":2913,"color":2914},{"name":2938,"color":2939},5400,"class property does not work in v2.5.1","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5400",0.76182437,["Reactive",2995],{},["Set"],["ShallowReactive",2998],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fUNq2cYdedm-BKiOWeNKqwLcytthOAUocOAacNnAKE4k":-1},"/nuxt/nuxt.com/1435"]