\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_",[3018,3021],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"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.6984513,{"description":3033,"labels":3034,"number":3041,"owner":3025,"repository":3025,"state":3042,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.1`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.3.1`\r\n- Builder: `vite`\r\n- User Config: `extends`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nImpossible to reproduce online due to the nature of CodeSandbox/StackBlitz.\r\nNeed to run the project in VS Code w/ Volar.\r\n\r\n### Describe the bug\r\n\r\nWhen extending a Nuxt layer that's a npm package with a component inside of it, I don't get any type completion for props.\r\n\r\nI do, in fact, have everything working fine If I extend the layer in the `.playground` folder directly inside the same project.\r\nLet's say I create a simple `MyButton` component that accepts a `variant` prop that could be `\"solid\"` or `\"ghost\"`: I get `variant` autocompleted then it suggests `solid` or `ghost` as possible values.\r\n\r\nNow, If I install the package and extend it in `nuxt.config.ts` and try to replicate this behavior, it doesn't work. Component works fine though. \r\n\r\nPlugins I provide are working fine. Example: `$toast` is suggested, the `success` property pops up if I try `$toast.s` and I get every available hint inside of it. Same thing for composables (custom one or imported from layer dependencies).\r\n\r\nIs it a Volar issue? Should I do something in my `tsconfig` file?\r\nI tried with my work project layer as well as other random layers available on npmjs and got the same outcome.\r\n\r\n### Additional context\r\n\r\nVS Code 1.79.2 w/ Volar 1.8.3.\r\n\r\n### Logs\r\n\r\n_No response_",[3035,3038],{"name":3036,"color":3037},"3.x","29bc7f",{"name":3039,"color":3040},"pending triage","E99695",21877,"closed","No type completion support for components in a Nuxt layer","2023-07-04T08:00:32Z","https://github.com/nuxt/nuxt/issues/21877",0.69964474,{"description":3048,"labels":3049,"number":3056,"owner":3025,"repository":3026,"state":3042,"title":3057,"updated_at":3058,"url":3059,"score":3060},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3050,3053],{"name":3051,"color":3052},"bug","d73a4a",{"name":3054,"color":3055},"v3","49DCB8",4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.70039207,{"labels":3062,"number":3064,"owner":3025,"repository":3025,"state":3042,"title":3065,"updated_at":3066,"url":3067,"score":3068},[3063],{"name":3036,"color":3037},13342,"Nuxt config components dirs behavior","2023-01-19T17:03:04Z","https://github.com/nuxt/nuxt/issues/13342",0.7036821,{"description":3070,"labels":3071,"number":3078,"owner":3025,"repository":3025,"state":3042,"title":3079,"updated_at":3080,"url":3081,"score":3082},"I've spent many hours to investigate the strange behavior in our large app.\r\nFinally I've found it, it seems so furious that I just have no idea what to do next with nuxt and with our templates among the whole application.\r\n\r\nAs usual, I created the separate repo with very simple code to demonstrate it: https://github.com/Kasheftin/nuxt-bug4.\r\nI'll show two bugs (alhough they may have one source).\r\n\r\nI suppose the reason is this component we use as a wrapper (everything else in the demo is hello world):\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv class=\"col -menu\">\r\n \u003Cslot/>\r\n \u003C/div>\r\n \u003Cdiv class=\"col -content\">\r\n \u003Cnuxt-child/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nIf the user goes to the index page, we show him menu column only using the index page that looks like:\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003CTwoColumns>\r\n MENU GOES HERE\r\n \u003C/TwoColumns>\r\n\u003C/template>\r\n```\r\n\r\nThen he follows the nested route and the target page placed into the nuxt-child of the wrapper.\r\n\r\n# The first bug:\r\n\r\n1. Follow the /a link. There's an input field with v-model, type anything and it appears just after the input.\r\n2. Follow /a/b link. Type something into the input field. It will work, but after every keypress nuxt show the progress bar at the top of the page like it load something. Although that's just simple inner component value update.\r\n\r\n# The second bug:\r\n\r\n3. Now follow /a/b/c link. Now only the first key press works. After that the data stops updating. It seems the component dies after the first key press. Although /b and /c are just nested nuxt-childs without javascript at all. And only the buggy progress bar at the top keeps working.\r\n\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/c1538\">#c1538\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3072,3075],{"name":3073,"color":3074},"documentation","5319e7",{"name":3076,"color":3077},"2.x","d4c5f9",1715,"Mix of slot and nuxt-child breaks everything","2023-01-18T15:42:10Z","https://github.com/nuxt/nuxt/issues/1715",0.7057694,{"labels":3084,"number":3094,"owner":3025,"repository":3025,"state":3042,"title":3095,"updated_at":3096,"url":3097,"score":3098},[3085,3087,3088,3091],{"name":3019,"color":3086},"8DEF37",{"name":3036,"color":3037},{"name":3089,"color":3090},"🍰 p2-nice-to-have","0E8A16",{"name":3092,"color":3093},"⚠️ breaking change","D746A6",14121,"Deprecate external `postcss.config` for webpack","2023-01-19T17:25:17Z","https://github.com/nuxt/nuxt/issues/14121",0.7071755,{"description":3100,"labels":3101,"number":3103,"owner":3025,"repository":3025,"state":3042,"title":3104,"updated_at":3105,"url":3106,"score":3107},"Hey @Atinux, the thing we talked at VueConf US:\r\n\r\nhttps://github.com/octref/nuxt-helper-json\r\n\r\n\r\n\r\nI'm hoping you guys can maintain it. It's just two simple json files.\r\nWhenever you change a public API for nuxt's included components, update this package and Vetur can pull the latest definitions to power the auto completion.\r\n\r\nCheers!\r\n\n\n\u003C!--cmty-->\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/c6823\">#c6823\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3102],{"name":3076,"color":3077},3174,"Nuxt.js auto completion in Vetur","2023-01-18T16:10:06Z","https://github.com/nuxt/nuxt/issues/3174",0.70776796,{"description":3109,"labels":3110,"number":3116,"owner":3025,"repository":3025,"state":3042,"title":3117,"updated_at":3118,"url":3119,"score":3120},"In Nuxt 3, we have introduced a new package `@nuxt/schema` that holds types, defaults, and documentation for all build-in configurations for Nuxt and from one source using [untyped](https://github.com/unjs/untyped). In comparation with Nuxt 2, these were separately maintained, often with inconsistencies. This new system is also designed to be future proof to be able to **manage configuration via UI** using generated (JSON)Schema files and also **runtime validation** to notice any usage issues.\r\n\r\nFor Nuxt modules, it is already possible to extend a typescript interface `ModuleOptions` to provide types, however it has same limitations of Nuxt 2 era. We have introduced new `schema` in new `@nuxt/kit` module definition system however it became unused.\r\n\r\nWith the introduction of Nuxt Layers, themes can also now require some specific configuration. Most importantly for configuring `runtimeConfig` and app config (either via `appConfig` or `app.config`)\r\n\r\nFor this, we can use the same tooling (untyped) as a built-in feature to allow providing custom configuration schemas from Nuxt layers and modules (also directly from a Nuxt project). Benefiting from most possibilities (note 1) we have already for core config.\r\n\r\nWe have made an experiment [nuxt-experiments/nuxt-config-schema](https://github.com/nuxt-experiments/nuxt-config-schema) that is now almost ready to be moved into a core experiment, allowing to make it better usable. It is possible to provide custom config schema for nuxt projects in different ways:\r\n\r\n- Using `nuxt.schema.ts` in main Nuxt project or a layer\r\n- Using `$schema` key in `nuxt.config`\r\n- Extend `nuxt.options.$schema` for modules\r\n- Extend schema using `schema:extend`, `schema:resolved` and `schema:beforeWrite` for modules (note 2)\r\n- Use `schema` in `defineNuxtModule` (recommended way for modules. also supports defaults)\r\n\r\nThe output will be in `.nuxt` directory and initially mainly usable for the Augmentation of types and custom purposes such as UI.\r\n\r\n\r\n**Notes:**\r\n\r\nnote 1: Since development and trial of the experimental module, one particularly important point we found is that, unlike the core usage, mixing schema with defaults is not a good practice. We can only merge schema after modules are setup and it is too late for them to **re**apply new defaults and do their config handling logic and also it makes it much harder to merge runtime configuration such as `app.config` since custom merger logic resides in runtime while schema is in the build-time namespace and merging strategy is different.\r\n\r\nnote 2: We have introduced two separate hooks. `extend`/`resolve` as main way to extend schema just after all modules are initialized and before core or any other place tries to use schema and another `beforeWrite` as last resort (less recommended) for when a module needs to extend schema based on build aftertifacts coming from webpack, rollup or nitro's rollup step and it mainly and only affects the written files.\r\n\r\n\r\n\r\n\r\n\r\n",[3111,3112,3115],{"name":3019,"color":3086},{"name":3113,"color":3114},"discussion","538de2",{"name":3036,"color":3037},15592,"Custom config schema","2023-04-07T01:47:49Z","https://github.com/nuxt/nuxt/issues/15592",0.70839095,{"labels":3122,"number":3125,"owner":3025,"repository":3025,"state":3042,"title":3126,"updated_at":3127,"url":3128,"score":3129},[3123,3124],{"name":3019,"color":3086},{"name":3076,"color":3077},6104,"Layout should be able to extend another layout (\"layout nesting\"?)","2023-01-22T15:50:56Z","https://github.com/nuxt/nuxt/issues/6104",0.70922846,{"description":3131,"labels":3132,"number":3138,"owner":3025,"repository":3026,"state":3042,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.8`\n- Nuxt Version: `-`\n- CLI Version: `3.25.1`\n- Nitro Version: `-`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.4\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/repro-4zfnvf\n\n### Description\n\nCustomizing the prefix in vite.config.ts and using the component DashboardSidebarCollapse, renders a button with the default \"U\"-prefix. Any Nuxt UI components that uses other Nuxt UI components should respect the configured prefix-option.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3133,3134,3135],{"name":3051,"color":3052},{"name":3054,"color":3055},{"name":3136,"color":3137},"nuxt/ui-pro","00dc82",4173,"DashboardSidebarCollapse does not respect prefix other than default","2025-06-26T15:24:25Z","https://github.com/nuxt/ui/issues/4173",0.71010256,["Reactive",3144],{},["Set"],["ShallowReactive",3147],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fKL4imeqwioaQiTaVMiiiuMdvpkptpMdohaCbX0brmts":-1},"/nuxt/ui/4606"]