\n \u003CUModal>\n \u003CUButton color=\"neutral\" variant=\"outline\">\n Open modal\n \u003C/UButton>\n\n \u003Ctemplate #body>\n \u003CUButton label=\"button1\" />\n \u003CUButton label=\"button2\" />\n \u003CUButton label=\"button3\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\nAlso, size and orientation affect the buttons inside the modal\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup orientation=\"vertical\" size=\"lg\">\n ...\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2872,2875,2878],{"name":2873,"color":2874},"bug","d73a4a",{"name":2876,"color":2877},"v3","49DCB8",{"name":2879,"color":2880},"triage","ffffff",4242,"ui","[ButtonGroup] Nested buttons are also styled as if they were directly placed","2025-05-28T10:43:07Z","https://github.com/nuxt/ui/issues/4242",0.7034011,{"description":2888,"labels":2889,"number":2900,"owner":2863,"repository":2863,"state":2864,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.19.1\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ezhq5k?file=pages/index.server.vue\r\n\n\n### Describe the bug\n\nWhen using `nuxt-client` from a nested Server Component, the component with `nuxt-client` does not render. The repro shows the behavior when nesting on both:\r\n- Server page (`index.server.vue` -> `ServerWithNuxtClient.server.vue`)\r\n- Universally-rendered page (`page.vue` -> `ServerWithNestedServer.server.vue` -> `ServerWithNuxtClient.server.vue`)\r\n\r\nWithout `nuxt-client`, the component will render. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2890,2893,2894,2897,2899],{"name":2891,"color":2892},"good first issue","fbca04",{"name":2873,"color":2874},{"name":2895,"color":2896},"🔨 p3-minor","FBCA04",{"name":2898,"color":2892},"✨ good reproduction",{"name":2860,"color":2861},26527,"nuxt-client stops rendering in a nested server component","2024-11-19T16:21:05Z","https://github.com/nuxt/nuxt/issues/26527",0.706609,{"description":2906,"labels":2907,"number":2909,"owner":2863,"repository":2863,"state":2864,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v22.7.0`\r\n- Nuxt Version: `3.13.2`\r\n- CLI Version: `3.13.2`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `npm@10.8.2`\r\n- Builder: `vite`\r\n- User Config: `modules`, `css`, `compatibilityDate`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.12.1`, `@nuxt/image@1.8.0`, `@nuxt/content@2.13.2`\r\n- Build Modules: `-`\r\n\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-1bvrus?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nHello!\r\n\r\nI'm trying to add a CRM form that is being provided via external scripts. When running in dev mode, the following error appears in the console:\r\n\r\nTypeError: Cannot read properties of undefined (reading 'extend')\r\n\r\nand the form won't render.\r\n\r\n[Here’s a minimal reproduction link.](https://stackblitz.com/edit/github-1bvrus?file=app.vue)\r\n\r\nThe issue doesn’t occur when I write the same code using pure Vue or in a Vue SSR sandbox. [Here’s the expected result using pure Vue SSR.](https://stackblitz.com/edit/github-gxnq1d?file=src%2FApp.vue)\r\nIt also doesn’t appear after I run npx nuxi generate.\r\n\r\nMy guess is that it’s somehow connected to the Nuxt dev server, but unfortunately, I don’t have enough expertise yet to understand how everything works under the hood.\r\n\r\nI’d appreciate any suggestions!\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2908],{"name":2857,"color":2858},29123,"Issue with external scripts when in dev mode","2024-09-26T04:42:43Z","https://github.com/nuxt/nuxt/issues/29123",0.7127459,{"description":2915,"labels":2916,"number":2920,"owner":2863,"repository":2882,"state":2864,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Environment\n\n- Browser: Safari 18.3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://github.com/user-attachments/assets/b664a2d2-e2c4-4b0b-932e-64afbfd1a263\n\n### Description\n\nWhen loading the page with untouched form fields, a slight vertical height shift occurs after the first interaction with any input. This issue appears exclusively in Safari (macOS/iOS).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2917,2918,2919],{"name":2873,"color":2874},{"name":2876,"color":2877},{"name":2879,"color":2880},4281,"`UForm` Form Input Fields Shift in Height on First Interaction (Safari-only)","2025-06-02T13:26:56Z","https://github.com/nuxt/ui/issues/4281",0.71367306,{"description":2926,"labels":2927,"number":2934,"owner":2863,"repository":2882,"state":2935,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.3\n- Nitro Version: -\n- Package Manager: pnpm@10.5.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, ui, runtimeConfig\n- Runtime Modules: @nuxt/ui-pro@3.0.0-beta.2, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read d\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/relaxed-scooby-nv4zrp?file=%2Fapp%2Fpages%2Findex.vue%3A7%2C51\n\n### Description\n\nI was importing type `FormSubmitEvent` from Nuxt UI but when I shifted to nuxt ui pro and replaced the import. But it broke, because nuxt ui pro doesn't export this type\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2928,2929,2930,2933],{"name":2873,"color":2874},{"name":2876,"color":2877},{"name":2931,"color":2932},"nuxt/ui-pro","00dc82",{"name":2879,"color":2880},3465,"closed","type `FormSubmitEvent` not working in nuxt ui pro version 3","2025-05-10T17:33:04Z","https://github.com/nuxt/ui/issues/3465",0.67988527,{"description":2941,"labels":2942,"number":2946,"owner":2863,"repository":2882,"state":2935,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI have a form like the following example:\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>Training Form\u003C/h1>\n \u003C/div>\n \u003CUForm :state=\"state\" :schema=\"schema\" @submit=\"handleSubmit\">\n \u003CUFormGroup label=\"Name\" name=\"name\">\n \u003CUInput v-model=\"state.name\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Training Week\" name=\"trainingWeek\">\n \u003Cdiv v-for=\"(day, index) in state.trainingWeek\" :key=\"index\">\n \u003CUFormGroup label=\"Day\" name=\"trainingWeek[' + index + '].day\">\n \u003CUInput v-model=\"day.day\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Exercises\" name=\"trainingWeek[' + index + '].exercises\">\n \u003Cdiv v-for=\"(exercise, exerciseIndex) in day.exercises\" :key=\"exerciseIndex\">\n \u003CUInput v-model=\"exercise.exerciseName\" />\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addExercise(index)\">Add Exercise\u003C/UButton>\n \u003C/div>\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addDay\">Add Day\u003C/UButton>\n \u003CUButton type=\"submit\">Submit\u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from \"zod\";\nimport type { FormSubmitEvent } from \"#ui/types\";\nconst state = reactive({\n name: \"\",\n trainingWeek: [\n {\n day: \"\",\n exercises: [\n {\n exerciseName: \"\",\n },\n ],\n },\n ],\n});\n\nconst schema = z.object({\n name: z.string().min(1, \"Required field\"),\n trainingWeek: z.array(\n z.object({\n day: z.string().min(1, \"Required field\"),\n exercises: z.array(\n z.object({\n exerciseName: z.string().min(1, \"Required field\"),\n }),\n ),\n }),\n ),\n});\n\ntype Schema = z.infer\u003Ctypeof schema>;\n\nconst handleSubmit = (event: FormSubmitEvent\u003CSchema>) => {\n console.log(JSON.stringify(event.data, null, 2));\n};\n\nconst addExercise = (index: number) => {\n state.trainingWeek[index].exercises.push({ exerciseName: \"\" });\n};\n\nconst addDay = () => {\n state.trainingWeek.push({ day: \"\", exercises: [{ exerciseName: \"\" }] });\n};\n\u003C/script>\n\n```\n\nI render the form based on state and dynamically add fields.\n\nThe form automatically sets up errors for name ( or any first level fields ) but doesn't set up errors for nested ones like day or exerciseName in the above example\n\nWhat's the proper way to create dynamic forms and avail error setting ? \n\nI'm able to get the following:\n```json\nprofile.vue:68 ZodError: [\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"day\"\n ]\n },\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"exercises\",\n 0,\n \"exerciseName\"\n ]\n }\n]\n```\noutput by parsing schema \n```js\nwatchEffect(() => {\n try {\n schema.parse(state);\n } catch (error) {\n console.error(error);\n }\n});\n```\n\n",[2943],{"name":2944,"color":2945},"question","d876e3",2674,"How to ensure UForm and UFormGroup auto assigns errors for nested dynamic form.","2024-11-18T16:59:59Z","https://github.com/nuxt/ui/issues/2674",0.6811453,{"description":2952,"labels":2953,"number":2957,"owner":2863,"repository":2882,"state":2935,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Environment\n\nOperating System: mac os\nNode Version: v22.14.0\nLaravel Version: 12.12.0\nNitro Version: -\nPackage Manager: bun 1.2.11\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\nN/A\n\n### Description\n\nI'm using the example from the documentation for implementing a login and the button behaves like a link. I've already tried as=\"button\" and it doesn't work.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from 'zod'\nimport type { FormSubmitEvent } from '@nuxt/ui'\n\nconst schema = z.object({\n email: z.string().email('Invalid email'),\n password: z.string().min(8, 'Must be at least 8 characters')\n})\n\ntype Schema = z.output\u003Ctypeof schema>\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n email: undefined,\n password: undefined\n})\n\nconst toast = useToast()\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })\n console.log(event.data)\n}\n\u003C/script>\n\u003Ctemplate>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Email\" name=\"email\">\n \u003CUInput v-model=\"state.email\" />\n \u003C/UFormField>\n \u003CUFormField label=\"Password\" name=\"password\">\n \u003CUInput v-model=\"state.password\" type=\"password\" />\n \u003C/UFormField>\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[2954,2955,2956],{"name":2873,"color":2874},{"name":2876,"color":2877},{"name":2879,"color":2880},4095,"UButton works as a link in Inertia","2025-05-07T08:12:17Z","https://github.com/nuxt/ui/issues/4095",0.69214803,{"description":2963,"labels":2964,"number":2974,"owner":2863,"repository":2882,"state":2935,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Environment\n\nnot needed\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nnot needed\n\n### Description\n\nThere is no error state on the input field like color \"error\" when u wrap URadioGroup in UFormField\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2965,2966,2969,2970,2971],{"name":2873,"color":2874},{"name":2967,"color":2968},"needs reproduction","CB47CF",{"name":2876,"color":2877},{"name":2879,"color":2880},{"name":2972,"color":2973},"closed-by-bot","ededed",4025,"RedioGroup in Form","2025-05-07T02:09:29Z","https://github.com/nuxt/ui/issues/4025",0.6971411,{"description":2980,"labels":2981,"number":2984,"owner":2863,"repository":2863,"state":2935,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### 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```",[2982,2983],{"name":2857,"color":2858},{"name":2967,"color":2896},30185,"Page refresh bug","2025-02-03T14:25:51Z","https://github.com/nuxt/nuxt/issues/30185",0.6974635,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVwlcUIaAe71r-bdbLbdESCk_R5yRbI50Dkb2V9SG_Uc":-1},"/nuxt/ui/3913"]