\n\n### Additional context\n\n_No response_",[3019,3022],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"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.7273261,{"description":3034,"labels":3035,"number":3042,"owner":3026,"repository":3027,"state":3028,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Description\n\nDiscovering **Nuxt UI** and **Nuxt UI Pro** has been one of the highlights of 2024 for me. These libraries have saved me countless hours while delivering polished, tested, and consistent components that elevate the aesthetic and functional quality of my projects. I admire the exceptional work being done by @benjamincanac and the team, particularly with the ambitious mission of rewriting the library to embrace both TailwindCSS v4 and Reka UI within Nuxt UI v3.\n\nOne of the standout features in v3 has been the integration of **TanStack Tables** into the `UTable` component, adding to tables many new features and possibilities. However, after some usage in real-world scenarios, I’ve noticed a gap: a wider variety of input components.\n\nI know that v3 is still in alpha, but I’d like to propose a new initiative for a future release, which I’m calling \"**The Inputs Update**\". This RFP could focus on identifying and implementing input components that would further enhance the library’s usability and versatility.\n\nAdditionally, this aligns with a prior suggestion to categorize form-related components separately within the documentation (#3019).\n\n## New Components\n\n- [ ] **`UInputCurrency`**\nWhile `UInputNumber` provides basic formatting options, a dedicated `UInputCurrency` component would offer enhanced functionality for handling monetary inputs, especially in scenarios requiring localized formatting.\n\n _Related: #1704_\n\n- [ ] **`UInputColor`**\nCurrently, there is an [example](https://ui3.nuxt.dev/getting-started#as-a-color-chooser) in `UColorPicker`, but it feels verbose and lacks certain key features, such as a text input for users to paste HEX or RGB values. \u003Cbr>\u003Cimg width=\"168\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3c11e311-aaa0-4db1-995f-80b15f04ceb7\" />\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3036,3039],{"name":3037,"color":3038},"feature","A27AF6",{"name":3040,"color":3041},"v3","49DCB8",3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.7312479,{"description":3048,"labels":3049,"number":3052,"owner":3026,"repository":3027,"state":3028,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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_",[3050,3051],{"name":3020,"color":3021},{"name":3023,"color":3024},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.73831505,{"description":3058,"labels":3059,"number":3064,"owner":3026,"repository":3027,"state":3065,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Description\n\nCurrently, the table component (\u003Cutable>) in NuxtUI lacks the ability to set colspan and rowspan for cells within the table. Adding this feature would enhance the capability and flexibility in structuring more complex table data.\n\n### Additional context\n\n_No response_",[3060,3061,3063],{"name":3020,"color":3021},{"name":3062,"color":3024},"wontfix-v2",{"name":3040,"color":3041},1651,"closed","Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.61284226,{"description":3071,"labels":3072,"number":3074,"owner":3026,"repository":3027,"state":3065,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### For what version of Nuxt UI are you suggesting this?\n\nv2\n\n### Description\n\nPlease export `UTable` types in '#ui/types' too (Rows/Columns types).\nThanks\n\n### Additional context\n\n_No response_",[3073],{"name":3020,"color":3021},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.6870732,{"description":3080,"labels":3081,"number":3083,"owner":3026,"repository":3027,"state":3065,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Description\n\n### Background\r\nThe current Table component in Nuxt UI allows for the listing of data but lacks a dedicated area for displaying supplementary information such as summary results. This limitation hinders the ability to present crucial data insights and reports.\r\n\r\n### Feature Proposal\r\nI propose the addition of a Footer area to the Table component. This Footer should be adjustable based on the columns specification, similar to how rows are handled. It would serve as a space for displaying aggregate results, subtotals, and other important notes related to the data.\r\n\r\n### Expected Impact\r\nWith this feature, the Nuxt UI Table component will become more versatile, offering a more comprehensive set of options for data presentation. Users will be able to glean a more comprehensive understanding of their data by viewing aggregate results and other key information directly within the table.\r\n\r\n### Additional Considerations\r\nImplementing the Footer must carefully balance design and functionality, as it could impact the existing structure of the Table component. Ensuring compatibility with existing features and maintaining extensibility is also crucial.\n\n### Additional context\n\nI am not a native English speaker, so this message was generated with the assistance of ChatGPT.\r\n> 英語話者ではないため、ChatGPTによりメッセージを生成しています。",[3082],{"name":3020,"color":3021},1025,"Add Footer Feature to Table Component","2025-07-02T14:57:22Z","https://github.com/nuxt/ui/issues/1025",0.6923872,{"description":3089,"labels":3090,"number":3098,"owner":3026,"repository":3027,"state":3065,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nTo control the rows of the table, I need a slot for them. For instance, if I want to implement a reorder feature using drag and drop, I require a \u003Ctr> element to loop through.\n\n### Additional context\n\n_No response_",[3091,3092,3093,3096],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3094,"color":3095},"closed-by-bot","ededed",{"name":3097,"color":3095},"stale",2685,"[UTable] Add the functionality to include a slot for all \u003Ctr> elements, as well as a 'default' slot.","2025-06-18T09:05:45Z","https://github.com/nuxt/ui/issues/2685",0.69375646,{"description":3104,"labels":3105,"number":3110,"owner":3026,"repository":3027,"state":3065,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Description\n\nGreetings, I noticed in the Utable documentation, nested or children columns are not mentioned. Is it possible to add this feature in the UTable component? \r\n\r\nOr If I missed something, does this feature already exist?\r\n\r\nIn my previous project, I had this feature using NextJS/AntD:\r\n\r\n\r\n**Result:**\r\n\r\n\r\n**Source code:**\r\n\r\n````tsx\r\n {\r\n dataIndex: \"\",\r\n title: \"Parent Column\",\r\n width: 300,\r\n children: [\r\n {\r\n dataIndex: \"ChildrenColumn1\",\r\n title: \"Children Column 1\",\r\n width: 150,\r\n render: (text: string) => \u003Cdiv>{text}\u003C/div>,\r\n },\r\n {\r\n dataIndex: \"ChildrenColumn2\",\r\n title: \"Children Column 2.\",\r\n width: 150,\r\n render: (text: string) => \u003Cdiv>{text}\u003C/div>,\r\n },\r\n ],\r\n },\r\n````\r\n\r\n\r\nThanks in advance!\r\n\r\n\r\n\n\n### Additional context\n\n_No response_",[3106,3107,3108,3109],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3094,"color":3095},{"name":3097,"color":3095},2037,"Nested/Children columns for UTable","2025-06-18T09:06:35Z","https://github.com/nuxt/ui/issues/2037",0.7000733,{"description":3116,"labels":3117,"number":3119,"owner":3026,"repository":3027,"state":3065,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHow can add a class to the \"selectable\" column? Other columns I can use the `class` attribute (https://ui.nuxt.com/components/table#columns) for the column, but for the automatically showing \"selectable\" column, there's no such way to customize it\n\n### Additional context\n\n_No response_",[3118],{"name":3020,"color":3021},2377,"Ability to add custom column data (specifically class) to automatically showing selectable column","2024-11-12T17:12:38Z","https://github.com/nuxt/ui/issues/2377",0.7108437,{"description":3125,"labels":3126,"number":3130,"owner":3026,"repository":3027,"state":3065,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Description\n\nThat gives the opportunity to organize better our data based on a KV pair.\r\nLet's take the 1st example of the docs [here](https://ui.nuxt.com/data/table#usage)\r\n\r\nWe have:\r\n```\r\n\u003Cheader> Id | Name | Title | Email | Role \u003C/header>\r\n\u003Crow for each object> {...person} \u003C/row>\r\n```\r\n\r\nWe could have the opportunity to emphesize the different roles like this:\r\n```\r\n\u003Cheader> Id | Name | Title | Email \u003C/header> \u003C= 1 column less\r\n\u003Csection> role: Admin \u003C/section>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Csection> role: Member \u003C/section>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n\u003Crow> {...person} \u003C/row>\r\n```\r\nThe Table component already has the ability to sort/filter, there may be a way to implement this without too much work!\r\nThanks for the consideration!\n\n### Additional context\n\n_No response_",[3127,3128,3129],{"name":3020,"color":3021},{"name":3094,"color":3095},{"name":3097,"color":3095},1195,"[Feature] Add section headers/separators in UTable","2025-06-19T02:13:00Z","https://github.com/nuxt/ui/issues/1195",0.71773356,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fbnt8eLmuVQAtHiOdTvo4Qh8WYd-HyxzIwwjBxDJVVI8":-1},"/nuxt/ui/3296"]