\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[3035,3038],{"name":3036,"color":3037},"question","d876e3",{"name":3039,"color":3040},"v3","49DCB8",4401,"ui","How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.7187449,{"description":3048,"labels":3049,"number":3057,"owner":3026,"repository":3042,"state":3027,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.11.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/condescending-euclid-k9r7nc\n\n### Description\n\nWhen a Modal is in a ButtonGroup, all buttons inside the Modal (including the X button) are styled as elements directly in the ButtonGroup\n\n```vue\n\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUInput placeholder=\"Search...\" />\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```",[3050,3053,3054],{"name":3051,"color":3052},"bug","d73a4a",{"name":3039,"color":3040},{"name":3055,"color":3056},"triage","ffffff",4242,"[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.7198276,{"description":3063,"labels":3064,"number":3072,"owner":3026,"repository":3042,"state":3073,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.2\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\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\nhttps://codesandbox.io/p/devbox/bug-report-ubutton-8st7kw\n\n### Description\n\nWhen I throw an error within the click event of `UButton`, the `NuxtErrorBoundary` component does not catch the error as expected. However, if I use a standard `\u003Cbutton>` tag instead of `UButton`, the error is caught correctly by the NuxtErrorBoundary.\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3065,3066,3067,3070],{"name":3051,"color":3052},{"name":3039,"color":3040},{"name":3068,"color":3069},"closed-by-bot","ededed",{"name":3071,"color":3069},"stale",3237,"closed","[UButton] is not working with NuxtErrorBoundary","2025-06-18T09:02:19Z","https://github.com/nuxt/ui/issues/3237",0.6859705,{"description":3079,"labels":3080,"number":3084,"owner":3026,"repository":3042,"state":3073,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.1.28\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-s2opq2ko?file=app/pages/index.vue\n\n### Description\n\nGiven this component nesting:\n\n- `UForm`\n - `UModal`\n - `UForm`\n\nThis is rendered as the following html:\n\n- `UForm` -> `form` - ✅\n - `UModal` -> `div` - ✅ (teleported to root)\n - `UForm` -> `div` - ❌ I am expecting `form`.\n\nI couldn't find a mention in the documentation that this is expected behaviour.\n\nTo reproduce:\n1. Run reproduction\n2. Click \"Open modal\" button\n3. Inspect the nested form element. It's a `div`:\n\n\nI am happy to have a crack at a PR, if you're willing to point me in the right direction 😌\n\n\n### Additional context\n\nFor context, this is our use case:\n* User fills out an onboarding form\n* One field in the onboarding form is business details\n* User has option to populate business details via business number (eg. [DUNS](https://www.dnb.com/en-us/smb/duns.html))\n* Business number field open in modal\n* User can enter business number in form in modal\n* User submits form, it populates state in parent form\n\n### Logs\n\n```shell-script\n\n```",[3081,3082,3083],{"name":3051,"color":3052},{"name":3039,"color":3040},{"name":3055,"color":3056},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.6963576,{"description":3090,"labels":3091,"number":3096,"owner":3026,"repository":3026,"state":3073,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### 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```",[3092,3093],{"name":3020,"color":3021},{"name":3094,"color":3095},"needs reproduction","FBCA04",30185,"Page refresh bug","2025-02-03T14:25:51Z","https://github.com/nuxt/nuxt/issues/30185",0.7003471,{"description":3102,"labels":3103,"number":3110,"owner":3026,"repository":3042,"state":3073,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### 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```",[3104,3105,3106,3109],{"name":3051,"color":3052},{"name":3039,"color":3040},{"name":3107,"color":3108},"nuxt/ui-pro","00dc82",{"name":3055,"color":3056},3465,"type `FormSubmitEvent` not working in nuxt ui pro version 3","2025-05-10T17:33:04Z","https://github.com/nuxt/ui/issues/3465",0.70683515,{"description":3116,"labels":3117,"number":3125,"owner":3026,"repository":3042,"state":3073,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Environment\n\n- Operating System - Ubuntu 22\n- Node Version: 22\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Package Manager: pnpm@10.9.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\n```javascript\nconst fields = ref([\n {\n name: 'code',\n type: 'otp',\n placeholder: 'Enter 6-digit code',\n otp: {\n length: 6,\n placeholder: '●',\n },\n },\n])\n\nconst submitButtonOptions = computed(() => ({\n label: 'Verify Code',\n loading: loading.value,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex min-h-screen items-center justify-center p-4\">\n \u003CUPageCard class=\"w-full max-w-md\">\n \u003CUAuthForm\n :schema=\"schema\"\n :state=\"credentials\"\n :fields=\"fields\"\n :loading=\"loading\"\n title=\"Multi-Factor Authentication\"\n subtitle=\"Enter the 6-digit code from your authenticator app to continue.\"\n :submit=\"submitButtonOptions\"\n @submit=\"verifyMFA\"\n >\n \u003Ctemplate #header>\n \u003CNuxtImg\n src=\"/thinkrocket-logo.png\"\n alt=\"ThinkRocket Logo\"\n width=\"100\"\n class=\"mx-auto\"\n preset=\"contain\"\n />\n \u003C/template>\n\n \u003Ctemplate #validation>\n \u003CUAlert\n v-if=\"mfaError\"\n color=\"error\"\n icon=\"i-lucide-alert-circle\"\n :title=\"mfaError\"\n class=\"mb-4\"\n />\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003Cdiv class=\"text-center space-y-2\">\n \u003Cp class=\"text-sm text-gray-600 dark:text-gray-300\">\n Check your authenticator app for the current code.\n \u003C/p>\n \u003CUButton variant=\"ghost\" size=\"sm\" :loading=\"loading\" @click=\"refreshChallenge\">\n \u003CUIcon name=\"i-lucide-refresh-cw\" class=\"h-4 w-4 mr-1\" />\n Get New Code\n \u003C/UButton>\n \u003C/div>\n \u003C/template>\n \u003C/UAuthForm>\n \u003C/UPageCard>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\n`:fields` is throwing typescript error. Only an issue with `otp`. Looking in\n\n- `node_modules/.pnpm/@nuxt+ui-pro@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carouse_48b559106e80aa1b3007fc5d3af2ab7f/node_modules/@nuxt/ui-pro/dist/runtime/components/AuthForm.vue.d.ts`\n- `node_modules/.pnpm/@nuxt+ui@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carousel@8._6f36fdd0332a5dab432a961d27814af8/node_modules/@nuxt/ui/dist/runtime/components/PinInput.vue.d.ts`\n- `node_modules/.pnpm/reka-ui@2.3.1_typescript@5.8.3_vue@3.5.16_typescript@5.8.3_/node_modules/reka-ui/dist/index.d.ts`\n \nI'm not seeing what I'm missing. The [docs](https://ui.nuxt.com/components/auth-form#props) don't give any other details than the example.\n\n```\nVue: Type\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}[]\nis not assignable to type AuthFormField[]\nType\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}\nis not assignable to type AuthFormField\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3118,3119,3121,3122,3123,3124],{"name":3051,"color":3052},{"name":3094,"color":3120},"CB47CF",{"name":3039,"color":3040},{"name":3107,"color":3108},{"name":3055,"color":3056},{"name":3068,"color":3069},4317,"UAuthForm otp typescript error","2025-06-18T02:14:57Z","https://github.com/nuxt/ui/issues/4317",0.7076376,{"description":3131,"labels":3132,"number":3138,"owner":3026,"repository":3042,"state":3073,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: -\n- CLI Version: 3.25.0\n- Nitro Version: -\n- Package Manager: pnpm@9.15.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nNA\n\n### Description\n\nI’m using Vue 3 with Inertia. I upgraded to v3.1 and now it behaves strangely: components—like a dropdown menu inside a button group—redirect instead of honoring the onSelect and performing the intended actions. In my case, I want to update a ref when clicking a dropdown item and open a drawer containing a form.\n\n### Additional context\n\nLaravel 12 with vue 3 and nuxtui 3.1 \n\n### Logs\n\n```shell-script\n\n```",[3133,3134,3135],{"name":3051,"color":3052},{"name":3039,"color":3040},{"name":3136,"color":3137},"inertia","6b46c1",3974,"Inertia: onSelect in dropdown items stop working","2025-05-13T12:45:19Z","https://github.com/nuxt/ui/issues/3974",0.70786643,{"description":3144,"labels":3145,"number":3148,"owner":3026,"repository":3026,"state":3073,"title":3149,"updated_at":3150,"url":3151,"score":3152},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.10.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: npm@10.8.1\r\n- Builder: -\r\n- User Config: ssr, site, hub, devtools, modules, i18n, css, app, alias, content, compatibilityDate\r\n- Runtime Modules: @nuxtjs/i18n@8.5.1, @nuxt/content@2.13.2, @nuxt/image@1.7.0, @nuxtjs/sitemap@5.3.5, @nuxthub/core@0.7.4\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-xogbeb?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nHello.\r\n\r\nWhen loading the website through `localhost:3000/` there is no issue.\r\nHowever, if I load the side through `localhost:3000/design`, I get the error message down below.\r\nStrangely enough, if I switch to the `/design` tab through the nav-bar, no error occurs.\r\n\r\nThe error seems to be with the `with-buttons.vue` component. \r\n\r\n## Things I have tried\r\n- searching for invisible unicode characters with bash scripts as well as Visual Studio Code's \"Render Whitespaces\" functionality\r\n- re-creating the .vue file and pasting the code\r\n- re-creating the .vue file and typing the code again from scratch\r\n\r\n## How it works again\r\n- If I remove the `\u003Cstyle scoped>\u003C/style>` tag, everything works again\r\n- If I remove the `with-buttons.vue` component from my page, everything works again\r\n\r\nThis issue seems to be quite similar, but didn't help me to resolve my error.\r\n\r\nIf any information is missing, let me know and I will provide it.\r\n\r\nThank you in advance\r\n\r\n### Additional context\r\n\r\n#### Error Message\r\n\r\n```\r\nWARN [Vue Router warn]: uncaught error during route navigation:\r\n\r\n\r\nERROR [vite-node] [plugin:vite:vue] [SyntaxError] PROJECT_FOLDER/components/carousel/with-buttons.vue:1:1 \u003Cbr>\u003Cpre>1 | <template>\r\n | ^\r\n2 | <div class=\"carousel-with-buttons\">\r\n3 | <div ref=\"carousel\" class=\"showcase__carousel\">\u003C/pre>\u003Cbr>\r\n\r\n| ^\r\n2 | <div class=\"carousel-with-buttons\">\r\n3 | <div ref=\"carousel\" class=\"showcase__carousel\">\u003C/pre>\u003Cbr>\r\nat PROJECT_FOLDER/components/carousel/with-buttons.vue:1:1\r\nSyntaxError: Error parsing JavaScript expression: Expecting Unicode escape sequence \\uXXXX. (2:39)\r\nat createCompilerError (node_modules\\@vue\\compiler-core\\dist\\compiler-core.cjs.js:1328:17)\r\nat Object.processExpression (node_modules\\@vue\\compiler-core\\dist\\compiler-core.cjs.js:4364:9)\r\nat ssrCodegenTransform (node_modules\\@vue\\compiler-ssr\\dist\\compiler-ssr.cjs.js:924:33)\r\nat Object.compile (node_modules\\@vue\\compiler-ssr\\dist\\compiler-ssr.cjs.js:1390:3)\r\nat doCompileTemplate (node_modules\\@vue\\compiler-sfc\\dist\\compiler-sfc.cjs.js:4286:47)\r\nat Object.compileTemplate (node_modules\\@vue\\compiler-sfc\\dist\\compiler-sfc.cjs.js:4228:12)\r\nat compile (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:204:35)\r\nat transformTemplateInMain (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:185:18)\r\nat genTemplateCode (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:2557:12)\r\nat transformMain (/PROJECT_FOLDER/node_modules/@vitejs/plugin-vue/dist/index.mjs:2411:55)\r\n```\r\n\r\n### Logs\r\n\r\n_No response_",[3146,3147],{"name":3020,"color":3021},{"name":3051,"color":3052},28699,"Error parsing JavaScript expression: Expecting Unicode escape sequence \\uXXXX","2024-09-02T11:27:06Z","https://github.com/nuxt/nuxt/issues/28699",0.7175898,["Reactive",3154],{},["Set"],["ShallowReactive",3157],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCmtf52h5IJOxqCMiYBK7Lou__jl0MYXnD037F3YHSwc":-1},"/nuxt/ui/4095"]