\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_",[2922,2923],{"name":2903,"color":2904},{"name":2909,"color":2910},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.7860056,{"description":2930,"labels":2931,"number":2936,"owner":2912,"repository":2913,"state":2937,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Description\n\nI'm wondering how I can style the active dot on the component level through the :ui prop.",[2932,2935],{"name":2933,"color":2934},"question","d876e3",{"name":2906,"color":2907},4228,"closed","Carousel: Can I style the active dot through the :ui prop?","2025-05-26T15:48:31Z","https://github.com/nuxt/ui/issues/4228",0.64007866,{"description":2943,"labels":2944,"number":2947,"owner":2912,"repository":2913,"state":2937,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### For what version of Nuxt UI are you suggesting this?\n\nv3-alpha\n\n### Description\n\nI was browsing through the v3 carousel docs at https://ui.nuxt.com/components/carousel#props, to see whether the v3 version will have callback events for onPrev and onNext, but didn't find it.\n\nIs this something that would be considered to implement?\n\nAlternatively, the ability to bind to the active item in the carousel, could also work.\n\nWe would use it to display an info text next to the image, and change it depending on which image is active in the carousel.\n\nIf this is something that is already possible, then please let me know how :)",[2945,2946],{"name":2903,"color":2904},{"name":2906,"color":2907},2475,"[v3] `Carousel` feature request: callback methods onPrev & onNext","2024-11-07T14:11:43Z","https://github.com/nuxt/ui/issues/2475",0.73305064,{"description":2953,"labels":2954,"number":2961,"owner":2912,"repository":2913,"state":2937,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Description\n\n\n\n\n\nWhen I set the strategy to override and do the carousel config, the class is not output correctly. Is this normal?",[2955,2956,2959],{"name":2933,"color":2934},{"name":2957,"color":2958},"closed-by-bot","ededed",{"name":2960,"color":2958},"stale",2304,"Override on Carousel","2025-06-18T09:06:04Z","https://github.com/nuxt/ui/issues/2304",0.7388588,{"description":2967,"labels":2968,"number":2972,"owner":2912,"repository":2913,"state":2937,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Description\n\nI want to place it on the side or on the top like tabs component",[2969,2970,2971],{"name":2933,"color":2934},{"name":2957,"color":2958},{"name":2960,"color":2958},1410,"Can carousel indicator be located elsewhere beside on bottom of parent?","2025-06-19T02:12:52Z","https://github.com/nuxt/ui/issues/1410",0.74931115,{"description":2978,"labels":2979,"number":2985,"owner":2912,"repository":2913,"state":2937,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### Description\n\nHi, I am using Vue 3 and trying to dynamically change the theme color of nuxt-ui. I have the following code:\n\n```typescript\nconst appConfig = useAppConfig()\nappConfig.ui.colors.primary = color\n```\nHowever, this doesn’t seem to work as expected. I’m wondering if I’m using it incorrectly. Could you please advise how I can dynamically switch the theme in nuxt-ui in Vue 3?",[2980,2981,2982],{"name":2933,"color":2934},{"name":2906,"color":2907},{"name":2983,"color":2984},"vue","42b883",3952,"Issue with dynamically changing theme colors in Nuxt UI using Vue 3","2025-05-12T13:05:27Z","https://github.com/nuxt/ui/issues/3952",0.7627808,{"description":2991,"labels":2992,"number":2996,"owner":2912,"repository":2913,"state":2937,"title":2997,"updated_at":2998,"url":2999,"score":3000},"### Description\n\nhttps://ui.nuxt.com/components/carousel#with-thumbnails\n\nThere are a couple of issues with the current implementation:\n\n1. Swiping via gestures isn't tracked — when switching slides this way, the active thumb doesn't update.\n2. The thumbs list can have more items, so scrolling needs to be handled properly.\n\nHere's my take on fixing both:\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = [\n 'https://picsum.photos/640/640?random=1',\n 'https://picsum.photos/640/640?random=2',\n 'https://picsum.photos/640/640?random=3',\n 'https://picsum.photos/640/640?random=4',\n 'https://picsum.photos/640/640?random=5',\n 'https://picsum.photos/640/640?random=6',\n 'https://picsum.photos/640/640?random=7',\n 'https://picsum.photos/640/640?random=8',\n 'https://picsum.photos/640/640?random=9',\n 'https://picsum.photos/640/640?random=10',\n]\n\nconst carousel = useTemplateRef('carousel')\nconst thumbCarousel = useTemplateRef('thumbCarousel')\nconst activeIndex = ref(0)\n\nfunction onClickPrev() {\n activeIndex.value--\n}\nfunction onClickNext() {\n activeIndex.value++\n}\n\nfunction onSelect(index: number) {\n activeIndex.value = index\n\n thumbCarousel.value?.emblaApi?.scrollTo(index)\n}\n\nfunction onThumbClick(index: number) {\n carousel.value?.emblaApi?.scrollTo(index)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex-1 w-full\">\n \u003CUCarousel\n ref=\"carousel\"\n v-slot=\"{ item }\"\n arrows\n :items=\"items\"\n :prev=\"{ onClick: onClickPrev }\"\n :next=\"{ onClick: onClickNext }\"\n class=\"w-full max-w-xs mx-auto\"\n >\n \u003Cimg :src=\"item\" width=\"320\" height=\"320\" class=\"rounded-lg\">\n \u003C/UCarousel>\n\n \u003Cdiv class=\"pt-4 max-w-xs mx-auto\">\n \u003CUCarousel\n ref=\"thumbCarousel\"\n v-slot=\"{ item, index }\"\n :items=\"items\"\n class=\"w-full\"\n contain-scroll=\"keepSnaps\"\n drag-free\n :ui=\"{ item: 'basis-auto' }\"\n >\n \u003Cimg\n :src=\"item\"\n width=\"44\"\n height=\"44\"\n class=\"size-11 opacity-25 hover:opacity-100 transition-opacity rounded-lg\"\n :class=\"{ 'opacity-100': activeIndex === index }\"\n alt=\"\"\n @click=\"onThumbClick(index)\"\n >\n \u003C/UCarousel>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_",[2993,2994,2995],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2909,"color":2910},4032,"[Carousel] improve thumb example","2025-05-02T09:58:58Z","https://github.com/nuxt/ui/issues/4032",0.7671106,{"description":3002,"labels":3003,"number":3012,"owner":2912,"repository":2913,"state":2937,"title":3013,"updated_at":3014,"url":3015,"score":3016},"### Environment\n\n- Nuxt Vesrion: '3.15.1'\n- Nuxt/ui Version: '3.0.1'\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.1\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/pull/2251\n\n### Description\n\nThis issue was previously addressed and fixed in [PR #2251](https://github.com/nuxt/ui/pull/2251). However, after upgrading to Nuxt UI v3.0.1, the dir prop no longer exists, making it impossible to switch the direction of the Carousel.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3004,3007,3010,3011],{"name":3005,"color":3006},"bug","d73a4a",{"name":3008,"color":3009},"needs reproduction","CB47CF",{"name":2906,"color":2907},{"name":2957,"color":2958},3705,"Missing \"dir\" Prop in Carousel Component After Nuxt UI v3.0.1 Update","2025-05-31T02:09:01Z","https://github.com/nuxt/ui/issues/3705",0.7689309,{"description":3018,"labels":3019,"number":3023,"owner":2912,"repository":2913,"state":2937,"title":3024,"updated_at":3025,"url":3026,"score":3027},"### Environment\n\nOperating System: Windows_NT\nNode Version: v20.18.0\nNuxt Version: -\nCLI Version: 3.14.0\nNitro Version: -\nPackage Manager: unknown\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nCannot use v3 on stackblitz so no repo.\n\n### Description\n\nThere are two things. \n**First: even though the route detection thus the active highlight works when default(no config or when clicking only) but not when using 'v-model' or 'defaultValue'. Tried the code in docs, it only works when item has children. So NavigationMenu doesn't act like a nav menu but just a normal menu.**\n\n```\nconst links = [\n [\n {\n label: t(\"nav.home\"),\n icon: \"ph:house\",\n to: \"/\",\n },\n {\n label: t(\"nav.products\"),\n icon: \"solar:box-linear\",\n to: \"/vendor/products\",\n },\n {\n label: t(\"nav.orders\"),\n icon: \"solar:clipboard-list-linear\",\n to: \"/vendor/orders\",\n },\n ],\n];\n\n\nconst activeItem = '1'\n```\n```\n \u003CUNavigationMenu\n v-model=\"activeItem\"\n orientation=\"vertical\"\n :items=\"links\"\n color=\"neutral\"\n :ui=\"{ link: 'py-2' }\"\n />\n```\n\n\nSecond: It would be better the route detection works for sub routes too. For example a route link should be active not just for /products but also for /products/new, products/g300gk-l2210j etc...\n\n### Additional context\nhttps://ui3.nuxt.dev/components/navigation-menu#control-active-item\n\n### Logs\n\n_No response_",[3020,3021,3022],{"name":3005,"color":3006},{"name":3008,"color":3009},{"name":2906,"color":2907},2360,"[NavigationMenu] Active item logic broken","2024-10-11T09:56:55Z","https://github.com/nuxt/ui/issues/2360",0.7699191,["Reactive",3029],{},["Set"],["ShallowReactive",3032],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQfEBnRFekRAf-UdSrCG8BGxnhRIC0MloUWMvlYpEEfo":-1},"/nuxt/ui/4372"]