\n\n### Additional context\n\n_No response_",[3139,3142],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"triage","ffffff",4606,"nuxt","ui","open","✨ Expand/Collapse Support for Component Theme JSON in Nuxt UI Docs","2025-07-26T11:50:47Z","https://github.com/nuxt/ui/issues/4606",0.72806245,{"description":3154,"labels":3155,"number":3161,"owner":3146,"repository":3147,"state":3148,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Description\n\n`name` and `type` in the `ProseField` component can only be consigned as strings:\n\n```\n::field{name=\"fieldname\" type=\"boolean\"}\ndescription\n::\n```\n\nBut actually I need them as slots like:\n\n```\n::field\n#name\n\u003Cbutton>fieldname\u003C/button>\n#type\n\u003Cspan>fieldtype\u003C/span>\n#default\ndescription\n::\n```\n\nIt's not much of an adjustment, just a little tweaking in the respective Vue component:\n\n```\n \u003Cspan\n v-if=\"!!slots.name || name\"\n :class=\"ui.name({ class: props.ui?.name })\"\n >\n \u003Cslot name=\"name\" mdc-unwrap=\"p\">\n {{ name }}\n \u003C/slot>\n \u003C/span>\n```\n\nI tried to overwrite it with my own component in `component/contents/ProseField.vue`, but it didn't work in production, probably because of tree shaking. (That's another issue.)\n\n### Additional context\n\n_No response_",[3156,3157,3160],{"name":3140,"color":3141},{"name":3158,"color":3159},"v3","49DCB8",{"name":3143,"color":3144},4575,"Allow name and type slots in ProseField (#uiPro)","2025-07-22T20:26:57Z","https://github.com/nuxt/ui/issues/4575",0.7343697,{"description":3167,"labels":3168,"number":3174,"owner":3146,"repository":3146,"state":3148,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Describe the feature\n\nSometimes you need to have multiple components in the `app.vue` file, or as close to the root element as possible. For example, if you have multiple modals that must be present not only on every page, but also on every layout (dialogs, cookie notice, etc) or any other interface resource and you must add each one manually somewhere in the `app.vue` file.\r\n\r\nI think it would be nice to have a directory for \"universal\" components that Nuxt detects and automatically injects into the root element. This would perfectly follow the philosophy of the framework to improve the DX as much as possible.\r\n\r\nAn example of how it would be now and how it could be:\r\n\r\n```vue\r\n// ~/app.vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n \u003C!-- universal components -->\r\n \u003CMenuDialog />\r\n \u003CLanguageDialog />\r\n \u003CColorModeDialog />\r\n \u003CBackdrop />\r\n \u003C!-- etc -->\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\nOr you could just move those components to a directory called `~/components/universal` (for example) and Nuxt would take care of injecting them automatically.\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3169,3171],{"name":3140,"color":3170},"8DEF37",{"name":3172,"color":3173},"discussion","538de2",19492,"Components automatically injected into the root element","2024-06-30T11:09:20Z","https://github.com/nuxt/nuxt/issues/19492",0.7371852,{"description":3180,"labels":3181,"number":3188,"owner":3146,"repository":3146,"state":3148,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.12.3\r\n- CLI Version: 3.12.3\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@6.11.0\r\n- Builder: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-qwsfdu\r\n\r\n### Describe the bug\r\n\r\n- Nest a 'universal' component within a server component.\r\n- Have `@unocss/nuxt` module. \r\n- Run `npm run build` then `npm run preview`\r\n- The nested component has no styling\r\n\r\n### Additional context\r\n\r\nAlmost certainly related to https://github.com/nuxt/nuxt/issues/27584\r\n\r\n### Logs\r\n\r\n_No response_",[3182,3185],{"name":3183,"color":3184},"pending triage","E99695",{"name":3186,"color":3187},"server components","839413",28043,"Styles removed from components nested in 'Server Components' during build when unocss present","2024-07-05T09:48:52Z","https://github.com/nuxt/nuxt/issues/28043",0.73820555,{"description":3194,"labels":3195,"number":3199,"owner":3146,"repository":3147,"state":3148,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### Description\n\nI've used [Quasar's tree-component with checkboxes](https://quasar.dev/vue-components/tree#tick-strategy) as a form element in several use-cases. It's an extremely useful element for hierarchical content when it makes sense that the user is able to see all options simultaneously (i.e. not hidden in a dropdown or something similar).\n\nI can see that this component variant is mentioned on [Reka-ui's docs page](https://reka-ui.com/docs/components/tree#with-checkbox).\n\nAre there any plans to add this?\n\n### Additional context\n\n_No response_",[3196,3197,3198],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4243,"UTree with checkboxes","2025-05-28T13:19:10Z","https://github.com/nuxt/ui/issues/4243",0.7417666,{"description":3205,"labels":3206,"number":3210,"owner":3146,"repository":3147,"state":3148,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\n**Title**: Add Descriptions component\n\n**Description**\nThanks to the Nuxt UI team for the great work 🙏. Currently, the library does not provide a component similar to [Descriptions](https://ant.design/components/descriptions-cn).\n\nThis type of component is very common in real-world applications, often used to display descriptive information in pairs, such as user profiles, order details, or configuration parameters. Ant Design’s Descriptions component provides a clean and convenient way to present such data.\n\n**Use Case**\n\n* Add a `Descriptions` component to display data in “label–content” pairs.\n* Support horizontal and vertical layouts.\n* Support configurable column count with automatic wrapping.\n* Allow customization of label and content styles.\n\n**Expected Behavior**\nDevelopers should be able to easily use a Descriptions component, similar to Ant Design, to quickly build data presentation pages.\n\ne.g:\n\n\u003Cimg width=\"1421\" height=\"478\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f460119-101d-4dea-bb41-055ca77679af\" />\n\n### Additional context\n\n_No response_",[3207,3208,3209],{"name":3140,"color":3141},{"name":3158,"color":3159},{"name":3143,"color":3144},4788,"[Feature Request] Add Descriptions component","2025-08-19T03:39:55Z","https://github.com/nuxt/ui/issues/4788",0.74191314,{"description":3216,"labels":3217,"number":3228,"owner":3146,"repository":3147,"state":3229,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[3218,3221,3222,3223,3226],{"name":3219,"color":3220},"feature","A27AF6",{"name":3158,"color":3159},{"name":3143,"color":3144},{"name":3224,"color":3225},"closed-by-bot","ededed",{"name":3227,"color":3225},"stale",4138,"closed","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.6901938,{"description":3235,"labels":3236,"number":3239,"owner":3146,"repository":3147,"state":3229,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Description\n\n🙏 First of all, thank you to the Nuxt UI team for your outstanding contributions!\n\nNuxt UI has greatly improved the developer experience for building modern Nuxt applications.\n\n---\n\nDescription\n\nCurrently, nuxt/ui provides a powerful set of UI components and form elements, but it lacks a built-in dynamic schema-form system. In many enterprise applications, we spend a lot of repetitive time writing similar form templates and CRUD logic.\n\nI propose adding a \u003Cschema-form> component, similar to [Ant Design ProComponents Schema Form](https://procomponents.ant.design/en-US/components/schema-form), to help developers quickly build dynamic forms with minimal boilerplate.\n\nMotivation\n\t•\tReduce repetitive code for standard CRUD forms.\n\t•\tCentralize form configuration into JSON schema.\n\t•\tAutomatically handle form rendering, validation, and API requests.\n\t•\tSimplify maintenance and improve developer productivity for admin panels and back-office tools.\n\n---\nProposed API\n\nA possible schema-form component interface could be:\n\n```vue\n\u003CSchemaForm\n :schema=\"{\n title: 'User Info',\n mode: 'create', // or 'update'\n api: {\n detail: '/api/user/detail',\n create: '/api/user/create',\n update: '/api/user/update'\n },\n fields: [\n { label: 'Username', name: 'username', component: 'input', rules: [{ required: true }] },\n { label: 'Email', name: 'email', component: 'input' },\n { label: 'Role', name: 'role', component: 'select', options: [\n { label: 'Admin', value: 'admin' },\n { label: 'User', value: 'user' }\n ]}\n ],\n initialValues: { role: 'user' }\n }\"\n @submit-success=\"onSubmit\"\n/>\n```\n---\nFeatures\n\t•\t✅ Schema-driven form rendering (fields, labels, validation, components)\n\t•\t✅ Auto-fetch detail API for edit mode\n\t•\t✅ Built-in submit to create/update APIs\n\t•\t✅ Support for u-input, u-select, u-date-picker, and custom components\n\t•\t✅ Works seamlessly with Nuxt UI design system\n\n---\n\nBenefits\n\t•\tSignificant reduction in repetitive CRUD form code\n\t•\tAligns with enterprise admin panel requirements\n\t•\tMatches developer experience from frameworks like Ant Design ProComponents\n\t•\tMakes Nuxt UI more competitive for dashboard/admin scenarios\n\n---\n\nAlternatives\n\nRight now, developers must:\n\t•\tManually write each form template (using u-form, u-form-item, etc.)\n\t•\tHandle API fetching/submission manually with useFetch\n\t•\tDuplicate similar code across multiple CRUD pages\n\n---\n\nReferences\n\t•\tAnt Design ProComponents Schema Form: https://procomponents.ant.design/en-US/components/schema-form\n\n\n### Additional context\n\n_No response_",[3237,3238],{"name":3140,"color":3141},{"name":3143,"color":3144},4653,"[Feature Request] Add dynamic schema-form similar to Ant Design ProComponents Schema Form for reducing CRUD workload","2025-08-07T17:19:54Z","https://github.com/nuxt/ui/issues/4653",0.70697385,{"description":3245,"labels":3246,"number":3252,"owner":3146,"repository":3147,"state":3229,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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```",[3247,3250,3251],{"name":3248,"color":3249},"bug","d73a4a",{"name":3158,"color":3159},{"name":3143,"color":3144},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.715745,{"description":3258,"labels":3259,"number":3266,"owner":3146,"repository":3147,"state":3229,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### Description\n\nIs there a way to add custom props to a component for styling—similar to how variant works for buttons? I’d like to add variant support to FormField, but currently, it only supports size.\n\nMy main goal is to allow styling of components provided by my Nuxt module. Ideally, I want to define variants and extra props via app.config.ts. An alternative approach I'm thinking of is to offer per-component config options, similar to Nuxt UI, but managed separately from its config.",[3260,3263,3264,3265],{"name":3261,"color":3262},"question","d876e3",{"name":3158,"color":3159},{"name":3224,"color":3225},{"name":3227,"color":3225},4148,"Additional props like variants for styling","2025-08-20T02:08:47Z","https://github.com/nuxt/ui/issues/4148",0.72573525,["Reactive",3272],{},["Set"],["ShallowReactive",3275],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYRHVZq-x92ZtLVEbrUH3lYM1oasj-yJaLsZFhusZiJE":-1},"/nuxt/ui/4250"]