\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_",[3065,3066],{"name":3036,"color":3037},{"name":3067,"color":3068},"triage","ffffff",4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7064328,{"labels":3075,"number":3080,"owner":3025,"repository":3025,"state":3081,"title":3082,"updated_at":3083,"url":3084,"score":3085},[3076,3077],{"name":3036,"color":3053},{"name":3078,"color":3079},"2.x","d4c5f9",4430,"closed","Multi-variant Nuxt App","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/4430",0.66796356,{"description":3087,"labels":3088,"number":3093,"owner":3025,"repository":3026,"state":3081,"title":3094,"updated_at":3095,"url":3096,"score":3097},"### Description\n\nHi! How can I set up a variant, for example switch component?\n\n`app.config`:\n```js\nswitch: {\n defaultVariants: {\n color: 'neutral',\n },\n variants: {\n button: {\n true: {\n root: 'flex-row-reverse hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] rounded-[calc(var(--ui-radius)*1.5)] transition-colors',\n container: 'my-2 mx-2',\n wrapper: 'size-full relative',\n label: 'py-2',\n },\n }\n }\n}\n```\nUsing this has no effect...\n```html\n\u003CUSwitch v-model=\"value\" label=\"test\" button />\n```\n\n---\nbut if i set defaultVariants in `app.config` its works:\n```\ndefaultVariants: {\n color: 'neutral',\n button: true\n},\n```\n\n---\nso how do you make it work?",[3089,3090,3091,3092],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3040,"color":3041},{"name":3043,"color":3041},3179,"Understanding how variants work (custom variants)","2025-06-18T09:02:25Z","https://github.com/nuxt/ui/issues/3179",0.67577195,{"labels":3099,"number":3104,"owner":3025,"repository":3025,"state":3081,"title":3105,"updated_at":3106,"url":3107,"score":3108},[3100,3101],{"name":3036,"color":3053},{"name":3102,"color":3103},"3.x","29bc7f",12962,"Type Support for Global Components (e.g. `\u003Cnuxt-link>`)","2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12962",0.68718565,{"description":3110,"labels":3111,"number":3115,"owner":3025,"repository":3026,"state":3081,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Description\n\nHi, \nI'm struggling to customize my components when using Nuxt UI within another Nuxt Module, I've search but cannot get it to work, tried with using app.config.ts like below and also within module.ts but no joy, would appreciate if someone could help out.\n\n\n```\nexport default defineAppConfig({\n ui: {\n button: {\n slots: {\n base: 'rounded-full font-semibold cursor-pointer'\n },\n },\n }\n})\n\n```\nMy module.ts file:\n\n```\nimport { defineNuxtModule, installModule, createResolver } from '@nuxt/kit'\n\nexport default defineNuxtModule\u003CModuleOptions>({\n meta: {\n name: 'my-module',\n configKey: 'myModule',\n },\n hooks: {\n 'nitro:config': (nitroConfig) => {\n const { resolve } = createResolver(import.meta.url)\n\n nitroConfig.publicAssets ||= []\n nitroConfig.publicAssets.push({\n dir: resolve('./runtime/images/'),\n maxAge: 60 * 60 * 24 * 365,\n })\n },\n },\n defaults: {},\n async setup(_options, _nuxt) {\n const { resolve } = createResolver(import.meta.url)\n\n\n await installModule('@nuxt/ui')\n await installModule('nuxt-svgo', {\n autoImportPath: resolve('./runtime/icons'),\n defaultImport: 'component',\n componentPrefix: 'i',\n })\n\n _nuxt.options.css.push(resolve('./runtime/style.css'))\n },\n})\n\n```",[3112,3113,3114],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3043,"color":3041},3679,"How to override components style globally when using within another Nuxt Module?","2025-06-11T10:32:59Z","https://github.com/nuxt/ui/issues/3679",0.69114685,{"labels":3121,"number":3124,"owner":3025,"repository":3025,"state":3081,"title":3125,"updated_at":3083,"url":3126,"score":3127},[3122,3123],{"name":3036,"color":3053},{"name":3078,"color":3079},4320,"Default pre-processor language","https://github.com/nuxt/nuxt/issues/4320",0.6937949,{"description":3129,"labels":3130,"number":3133,"owner":3025,"repository":3026,"state":3081,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### Description\n\nHi,\n\nBeing able to override the **non-slot** properties of the tv theme using the ui prop would be very handy.\n\nSometimes you don't want to override globally but just want a slightly different variation of a component. When trying to restyle variations it becomes quite tricky when you cant override anything other than the slots.\n\neg. if you wanted to override compoundVariants the only choice is to do it globally, which naturally effects all uses of that component.\n\nA use case here is the UNavigationMenu. Accurately restyling hover effects etc is tricky without being able to override the whole tv object.\n\nI was also thinking it would be nice to be able to define your own theme directory where you could define component tv objects which either replace or merge with the Nuxt ui versions.\n\nThanks\nLee\n\n### Additional context\n\n_No response_",[3131,3132],{"name":3036,"color":3037},{"name":3022,"color":3023},3382,"Add ability to override entire tv object from ui prop","2025-05-23T13:04:10Z","https://github.com/nuxt/ui/issues/3382",0.69610536,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fsgDlwjGM9AFx-ZNWGJZHR1DIimByXrHQ8kU-k2lxj-Q":-1},"/nuxt/ui/2934"]