\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_",[2921,2924],{"name":2922,"color":2923},"enhancement","a2eeef",{"name":2925,"color":2926},"triage","ffffff",4138,"nuxt","ui","open","✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7645122,{"description":2936,"labels":2937,"number":2943,"owner":2928,"repository":2929,"state":2944,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\n\nSomething like\nhttps://ui.nuxt.com/components/auth-form#usage\n\nPerhaps also add a `validation` prop to combine with validation\nAnd perhapse also a `default-value` prop to support initializing the form\n\nSomething like\n```\nconst fields = [{\n name: 'email',\n type: 'text' as const,\n label: 'Email',\n placeholder: 'Enter your email',\n validation: z.string().email('Invalid email'),\n default-value: 'johndoe@gmail.com',\n required: true\n}, {\n name: 'password',\n label: 'Password',\n type: 'password' as const,\n placeholder: 'Enter your password'\n validation: z.string().min(8, 'Must be at least 8 characters'),\n}, {\n name: 'remember',\n label: 'Remember me',\n type: 'checkbox' as const\n}]\n```\n\n\n### Additional context\n\n_No response_",[2938,2939,2942],{"name":2922,"color":2923},{"name":2940,"color":2941},"v3","49DCB8",{"name":2925,"color":2926},4311,"closed","Add support for fields in form component similar to AuthForm","2025-06-12T15:22:43Z","https://github.com/nuxt/ui/issues/4311",0.69954664,{"description":2950,"labels":2951,"number":2959,"owner":2928,"repository":2929,"state":2944,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Description\r\n\r\nHi 👋🏻 \r\n\r\nI started using NuxtUI and realized one more thing that can be improved. Right now, For `v-model` of tabs component index (number) is used.\r\n\r\nIf we want to get the key of active tab for making API req then we have to do something like below:\r\n```ts\r\nconst activeTabKey = items[itemsModel.value]!.key\r\n\r\n// With this feature implemented we can directly use `itemsModel.value`\r\n```\r\n\r\nInstead, if we can allow using `key` then:\r\n- I'll be more readable\r\n- If we change the order of the tabs (in items array) it doesn't affect the active tab\r\n\r\n### Additional context\r\n\r\nWe can also introduce this change in v3.",[2952,2953,2954,2957],{"name":2922,"color":2923},{"name":2925,"color":2926},{"name":2955,"color":2956},"closed-by-bot","ededed",{"name":2958,"color":2956},"stale",2061,"Allow using tab item key as value for v-model","2025-06-18T09:06:22Z","https://github.com/nuxt/ui/issues/2061",0.7202054,{"description":2965,"labels":2966,"number":2973,"owner":2928,"repository":2928,"state":2944,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Describe the feature\n\nHi, I understand such tag `\u003Cscript id=\"__NUXT_DATA__\" ... />` is mandatory for hydration and client-side rendering, but I reckon showing raw values can cause security pitfall. I ran into a situation where secret values needed during client-side rendering.\r\n\r\nIt would be great if nuxt provides an encryption feature like below.\r\n\r\n```\r\n// nuxt.config.ts\r\nexport default defineNuxtConfig({\r\n nuxtData: {\r\n encryption: {\r\n type: 'AES',\r\n key: 'secret',\r\n }\r\n }\r\n});\r\n```\n\n### Additional information\n\n- [ ] 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).",[2967,2970],{"name":2968,"color":2969},"3.x","29bc7f",{"name":2971,"color":2972},"pending triage","E99695",24475,"support `__NUXT_DATA__` encryption from nuxt config file","2023-11-27T09:35:39Z","https://github.com/nuxt/nuxt/issues/24475",0.7568088,{"description":2979,"labels":2980,"number":2982,"owner":2928,"repository":2929,"state":2944,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi,\n\nWould it be possible to add an export of all components ?\n\nSomething like:\n\n```js\nexport * from './components'\n```\n\n### Additional context\n\nI'm trying to display a form field according to its value type (ex: boolean => checkbox, number => range ...).\n\nSadly, it looks like in composition API, one cannot use string for `\u003Ccomponent>` `:is` prop.\n\n```vue\n\u003Ctemplate>\n \u003C!-- This doesn't work -->\n \u003Ccomponent :is=\"typeof value === 'boolean' ? 'u-checkbox' : 'u-input'\" />\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[2981],{"name":2922,"color":2923},2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.75799435,{"description":2988,"labels":2989,"number":2995,"owner":2928,"repository":2928,"state":2944,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: pnpm@8.9.0\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-4cyshx?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\ninput Use v-model two-way binding, when change the v-model to :value, the two-way binding is still effective, need to refresh the page, then it will be normal.\r\n\r\n### Logs\r\n\r\n_No response_",[2990,2991,2992],{"name":2968,"color":2969},{"name":2971,"color":2972},{"name":2993,"color":2994},"needs reproduction","FBCA04",23688,"input Use v-model bidirectional binding hot update exception","2023-10-17T08:33:12Z","https://github.com/nuxt/nuxt/issues/23688",0.7604186,{"description":3001,"labels":3002,"number":3006,"owner":2928,"repository":2928,"state":2944,"title":3007,"updated_at":3008,"url":3009,"score":3010},"I am building a project with nuxt and i want to provide an oauth2 register/login to users. I have already seen and example with nuxt from @Atinux in the following link but if i am not wrong the client_id and secret are stored in the local storage and in the env variables which are accessible from both server and client side. I don't think that this is a good practice because anyone can grab them and use them. Does anyone knows a way to store them in a more secure way?\r\n\r\nAtinux oauth example.\r\nhttps://github.com/nuxt/example-auth0\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2167\">#c2167\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3003],{"name":3004,"color":3005},"2.x","d4c5f9",2496,"oauth2 ","2023-01-18T16:02:15Z","https://github.com/nuxt/nuxt/issues/2496",0.7614879,{"description":3012,"labels":3013,"number":3015,"owner":2928,"repository":2929,"state":2944,"title":3016,"updated_at":3017,"url":3018,"score":3019},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nIt would be cool if the errors array from UForm supported the message parameter having an array value (multiple messages). The default backwards compatible method could just join them with a space or something. (See https://ui.nuxt.com/components/form-group#props)\nThat is all.\n\n### Additional context\n\n_No response_",[3014],{"name":2922,"color":2923},2389,"Nested form validation array of messages","2025-06-29T17:10:53Z","https://github.com/nuxt/ui/issues/2389",0.7621939,{"description":3021,"labels":3022,"number":3027,"owner":2928,"repository":2929,"state":2944,"title":3028,"updated_at":3029,"url":3030,"score":3031},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI have a use case where I'd like this value to be `false`. Would it be possible to make this configurable?\n\n### Additional context\n\nhttps://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue#L30",[3023,3024,3025,3026],{"name":2922,"color":2923},{"name":2925,"color":2926},{"name":2955,"color":2956},{"name":2958,"color":2956},2710,"[CommandPalette] Make the `hold` prop of ComboboxOptions configurable","2025-06-18T09:05:43Z","https://github.com/nuxt/ui/issues/2710",0.762264,{"description":3033,"labels":3034,"number":3039,"owner":2928,"repository":2928,"state":2944,"title":3040,"updated_at":3041,"url":3042,"score":3043},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.12.1\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nCheckout the project on Stackblitz:\r\n[https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue](https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue)\r\nThe input value should be 2, but it remains 1 if you remove the async statement or NuxtLayout, everything will be fixed.\r\n\r\n### Describe the bug\r\n\r\nIt seems something happens in NuxtLayout that breaks v-model behavior *before mount* and prevent it from updating the value of input. if you don't use any async statement or NuxtLayout, everything works fine.\r\n\r\n### Additional context\r\n\r\nIf you don't use v-model and use `:value` and `@input` instead or just print the variable value, everything works file, only v-model is broken.\r\n\r\n### Logs\r\n\r\n_No response_",[3035,3036,3037,3038],{"name":2968,"color":2969},{"name":2971,"color":2972},{"name":2993,"color":2994},{"name":2955,"color":2956},26934,"NuxtLayout breaks v-model behaviour when used after any async statement","2024-05-07T01:49:01Z","https://github.com/nuxt/nuxt/issues/26934",0.76259214,["Reactive",3045],{},["Set"],["ShallowReactive",3048],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$furlR3bkSwG34uVP9TrHmGVFXLqSA1po8_pIY7vv7Y3E":-1},"/nuxt/ui/3430"]