\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_",[2935,2936],{"name":2904,"color":2905},{"name":2910,"color":2911},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-05-12T16:36:30Z","https://github.com/nuxt/ui/issues/4138",0.73427683,{"description":2943,"labels":2944,"number":2949,"owner":2913,"repository":2914,"state":2915,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Description\n\nIs there a way to add custom props to a component for styling—similar to how variant works for buttons? I’d like to add variant support to FormField, but currently, it only supports size.\n\nMy main goal is to allow styling of components provided by my Nuxt module. Ideally, I want to define variants and extra props via app.config.ts. An alternative approach I'm thinking of is to offer per-component config options, similar to Nuxt UI, but managed separately from its config.",[2945,2948],{"name":2946,"color":2947},"question","d876e3",{"name":2907,"color":2908},4148,"Additional props like variants for styling","2025-05-14T12:47:31Z","https://github.com/nuxt/ui/issues/4148",0.73945135,{"description":2955,"labels":2956,"number":2960,"owner":2913,"repository":2914,"state":2961,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Description\n\nIt would be cool if input number could have a button that can be shown beside either the increment/decrement button which, upon clicking it, resets the input back to its default value.\n\nThis is useful in forms whereby there may already be a sensibly inferred default for a value, but I want to allow the user to override that value without \"getting in the way\", and then if they want to change that value back to its default, the press of this reset button will reset the input back to its predefined default.\n\nAs of right now, I've used on a form field's label slot, a checkbox, that when toggled, enables my input and lets the user override the value, but this requires a click of the toggle, and then incrementing/decrementing the value.\nBut I'd prefer my UI to adapt to the user's needs on the fly, so say they want to change the value, they press the increment/decrement buttons, the input number's border changes to an active color like primary through the `highlight` option, thus indicating a change/override. **Where this comes in useful,** is once the user wants to revert the value back to default, the revert button in one click would revert the input's border back to the default secondary color (with `highlight` set to false) and the value displayed would revert to the default.\n\nThe reason for opening this PR is that I've tried implementing this using the `increment` slot in InputNumber, but I found myself having to copy a lot of the logic from InputNumber just to replicate the increment button, to then have my custom reset button and to get the Reka UI NumberFieldIncrement to pass the props to the right button, and it was starting to get clunky, so I thought about opening this issue to discuss this implementation here.\n\n### Additional context\n\nI'll attach some media tomorrow showing what I mean.",[2957,2958,2959],{"name":2904,"color":2905},{"name":2907,"color":2908},{"name":2910,"color":2911},4411,"closed","Button to reset input number to default value","2025-06-30T06:06:01Z","https://github.com/nuxt/ui/issues/4411",0.7077984,{"description":2967,"labels":2968,"number":2974,"owner":2913,"repository":2913,"state":2961,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.0.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: yarn@1.22.17\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-dvdiuv?file=app.vue\n\n### Describe the bug\n\nHi,\r\n\r\nI encountered a problem while creating a generic app button component in my project. I am using the dynamic component creation method in Vue and when I send a _NuxtLink_ value to the is attribute of the component tag, it does not render. I didn't encounter this problem on nuxt2. But it doesn't work on nuxt3. How can I solve it?\r\n\r\n`\u003CComponent is=\"NuxtLink\" to=\"/page\">Link\u003C/Component>` doesn't render as a tag\n\n### Additional context\n\nMy button component\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\nComponent.app-button(\r\n :is=\"as\"\r\n v-bind=\"$attrs\"\r\n :class=\"[variantClass, textTypeClass, linkTypeClass, outlineClass, blockClass, iconPositionClass, loadingClass]\"\r\n role=\"button\"\r\n)\r\n template(v-if=\"$slots.prepend\")\r\n slot(name=\"prepend\")\r\n\r\n template(v-if=\"iconPosition === 'left'\")\r\n .app-button__icon\r\n slot(name=\"icon\")\r\n\r\n slot\r\n\r\n template(v-if=\"iconPosition === 'right'\")\r\n .app-button__icon\r\n slot(name=\"icon\")\r\n\r\n template(v-if=\"$slots.append\")\r\n slot(name=\"append\")\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { ButtonPropTypes } from './AppButton.component.types'\r\n\r\nconst baseClassName = 'app-button'\r\n\r\nconst props = withDefaults(defineProps\u003CButtonPropTypes>(), {\r\n as: 'button',\r\n variant: 'default',\r\n text: false,\r\n link: false,\r\n outline: false,\r\n block: false,\r\n iconPosition: 'left'\r\n})\r\n\r\nconst slots = useSlots()\r\n\r\nconst variantClass = computed(() => `${baseClassName}--${props.variant}`)\r\n\r\nconst textTypeClass = computed(() => props.text && `${baseClassName}--text`)\r\nconst linkTypeClass = computed(() => props.link && `${baseClassName}--link`)\r\nconst outlineClass = computed(() => props.outline && `${baseClassName}--outline`)\r\nconst blockClass = computed(() => props.block && `${baseClassName}--block`)\r\n\r\nconst iconPositionClass = computed(() => {\r\n if (slots.icon) {\r\n if (props.iconPosition === 'left') {\r\n return `${baseClassName}--iconLeft`\r\n } else if (props.iconPosition === 'right') {\r\n return `${baseClassName}--iconRight`\r\n } else {\r\n return null\r\n }\r\n } else {\r\n return null\r\n }\r\n})\r\n\r\nconst loadingClass = computed(() => props.loading && `${baseClassName}--loading`)\r\n\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\" src=\"./AppButton.component.scss\">\u003C/style>\r\n```\r\n\n\n### Logs\n\n_No response_",[2969,2972],{"name":2970,"color":2971},"3.x","29bc7f",{"name":2924,"color":2973},"E99695",23450,"\u003Ccomponent is=\"NuxtLink\" ...> doesn't render ","2023-09-28T12:29:53Z","https://github.com/nuxt/nuxt/issues/23450",0.7174061,{"description":2980,"labels":2981,"number":2986,"owner":2913,"repository":2914,"state":2961,"title":2987,"updated_at":2988,"url":2989,"score":2990},"\u003Cdetails>\n \u003Csummary>Environment\u003C/summary>\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@11.4.1\n- Builder: -\n- User Config: modules, ssr, devtools, app, css, ui, runtimeConfig, alias, build, devServer, watch, future, experimental, compatibilityDate, nitro, vite, eslint, heyApi, i18n, icon, svgIconSprite\n- Runtime Modules: @nuxt/ui@3.1.2, @nuxt/test-utils/module@3.19.0, @nuxt/eslint@1.4.1, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.2.0, @hey-api/nuxt@0.1.6, @nuxtjs/i18n@9.5.4, nuxt-svg-icon-sprite@2.0.0\n- Build Modules: -\n------------------------------\n\u003C/details>\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://www.npmjs.com/package/@nuxt/ui?activeTab=code - `interface ModalSlots`\n\n### Description\n\nGreetings, thank you very much for the work you have done!\n\nUsing the example of the `UModal` component, you can see that props in scoped slots, such as `#footer=“{ close }”`, is untyped \n\u003Cdetails>\n \u003Csummary>Example\u003C/summary>\n\n \n\u003C/details>\n\nin the bundle package it can be seen that there are indeed no valid types of props in `ModalSlots` - https://www.npmjs.com/package/@nuxt/ui?activeTab=code `interface ModalSlots`, although they are present in the source files - https://github.com/nuxt/ui/blob/v3/src/runtime/components/Modal.vue#L70\n\n\nAs I understand it, it is not only `UModal`, but all components with scoped slots.",[2982,2985],{"name":2983,"color":2984},"bug","d73a4a",{"name":2907,"color":2908},4260,"Scoped slots are not typed","2025-06-02T09:08:41Z","https://github.com/nuxt/ui/issues/4260",0.7198372,{"description":2992,"labels":2993,"number":2996,"owner":2913,"repository":2914,"state":2961,"title":2997,"updated_at":2998,"url":2999,"score":3000},"### Description\n\nHi,\n\nit would be nice to have the option to disable the behaviour that the numbers increase or decrease when the buttons are pressed. Because even if I disable the component it doesn't stops. \n\n```js\n\u003CUInputNumber\n :disabled=\"loadingDec || loadingInc\"\n :min=\"0\"\n :max=\"10\"\n v-model=\"quantity\"\n variant=\"soft\"\n size=\"xl\"\n >\u003Ctemplate #decrement>\n \u003CUButton\n :loading=\"loadingDec\"\n variant=\"link\"\n :icon=\"quantity \u003C= 1 ? 'i-heroicons-trash' : 'i-lucide-minus'\"\n @click=\"loadingDec = true\"\n @mousedown=\"onMousedown()\"\n :ui=\"{\n base: `${iconHoverColor} text-gray-500 disabled:text-gray-500 cursor-pointer`,\n }\"\n />\n \u003C/template>\n \u003Ctemplate #increment>\n \u003CUButton\n :loading=\"loadingInc\"\n variant=\"link\"\n icon=\"i-lucide-plus\"\n @click=\"loadingInc = true\"\n :ui=\"{\n base: 'text-gray-500 hover:text-[var(--ui-color-primary-500)] disabled:text-gray-500 cursor-pointer',\n }\"\n />\n \u003C/template>\n \u003C/UInputNumber>\n````\n\nbest,\ngregor\n\n### Additional context\n\n_No response_",[2994,2995],{"name":2904,"color":2905},{"name":2907,"color":2908},3159,"option to disable on press behaviour for increment/decrement for inputNumber component","2025-05-14T15:41:35Z","https://github.com/nuxt/ui/issues/3159",0.72441655,{"description":3002,"labels":3003,"number":3006,"owner":2913,"repository":2913,"state":2961,"title":3007,"updated_at":3008,"url":3009,"score":3010},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v18.17.0\r\n- Nuxt Version: 3.7.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.17\r\n- Builder: -\r\n- User Config: runtimeConfig, purgeCSS, modules, pinia, imports, i18n, dayjs, dayjsI18n, turnstile, app, meta, build, css\r\n- Runtime Modules: nuxt-icons@3.2.1, @nuxtjs/turnstile@0.6.3, @gabortorma/nuxt-dayjs-i18n@2.0.2, @nuxtjs/i18n@8.0.0-beta.13, dayjs-nuxt@2.1.9, @nuxtjs/tailwindcss@6.10.1, @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.2.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new \r\n\r\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\r\n\r\n👉 Read documentation: https://nuxt.com\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/devbox/dazzling-lake-wsdcds?file=%2Fpages%2Findex.vue%3A3%2C8\r\n\r\n### Describe the bug\r\n\r\ni dont know am i thinking wrong but this is the case.\r\n\r\ni am changing data which i am also using as a prop and after i change i am calling the function inside of component but prop data is not changing directly.\r\n\r\n---------\r\n\r\nThere is a main page file and inside of it i have \r\ndata object\r\n\r\ndata: {\r\n id:0\r\n}\r\n\r\nwhen i click the button i am changing this data objects id to 2 and i am calling the method inside component\r\n\r\nbut if you check the console you can see the data is still 0. \r\n\r\nit should be 2 because i did this\r\n\r\nthis.data.id = 2;\r\nthis.$refs[\"testref\"].conslog();\r\n\r\n\r\nif i use nexttick it is working btw\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3004,3005],{"name":2970,"color":2971},{"name":2924,"color":2973},24872,"Nuxt3 props and refs weird behaviour","2023-12-22T16:00:35Z","https://github.com/nuxt/nuxt/issues/24872",0.7245902,{"description":3012,"labels":3013,"number":3022,"owner":2913,"repository":2913,"state":2961,"title":3023,"updated_at":3024,"url":3025,"score":3026},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v18.14.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n**VsCode 1.79.2**\r\n- vscode.typescript-language-features: disabled\r\n- Vue.volar: 1.8.3, enabled\r\n- Vue.vscode-typescript-vue-plugin: 1.8.3, enabled\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/niklas-may/nuxt-module-issue-reproduction\r\n\r\n### Describe the bug\r\n\r\n**Preface**\r\n_Thank you for your amazing work on Nuxt! I am not sure where this issue is best raised, Nuxt, VsCode or Vue. But due to the special typescript tooling with auto imports, I thought it's best to start here, and would be happy to hear if anybody observed a similar behaviour or has a solution._ \r\n\r\n**Description**\r\nWhen I open `~/.nuxt/components.d.ts` in VsCode and hover over an imported component, VsCode IntelliSense popover displays the correct types for this component.\r\nBut when I use the component in any other components template block, for example `~/app.vue`, the typing is missing the prop types.\r\n\r\n### Component and Type Definitions\r\n\r\n`~/../src/runtime/MyButton.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv style=\"border: 1px solid pink\">\r\n \u003Cslot />\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nwithDefaults(\r\n defineProps\u003C{\r\n variant: \"fill\" | \"ghost\";\r\n }>(),\r\n { variant: \"fill\" }\r\n);\r\n\u003C/script>\r\n```\r\n\r\n`~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\ndeclare module 'vue' {\r\n export interface GlobalComponents {\r\n //...\r\n 'MyButton': typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n //...\r\n }\r\n}\r\n\r\nexport const MyButton: typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n\r\nexport const componentNames: string[]\r\n```\r\n\r\n\r\n### Correct Intellisense\r\n\r\nVsCode popopver hovering `'MyButton'` in `~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\n(property) GlobalComponents['MyButton']: __VLS_WithTemplateSlots\u003CDefineComponent\u003C{\r\n variant: {\r\n type: PropType\u003C\"fill\" | \"ghost\">;\r\n required: true;\r\n default: string;\r\n };\r\n}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>, {\r\n ...;\r\n}>\r\n````\r\n\r\n### Wrong Intellisense\r\n\r\nVsCode popopver hovering `\u003CMyButton />` in the template block of `~/app.vue` (or any other template)\r\n\r\n```TypeScript\r\n(property) 'MyButton': DefineComponent\u003C{}, {}, any>\r\n```\r\n\r\n### Additional context\r\n\r\nThe above example is the current state of the reproduction repo. But a different, but similar behavior happened in other reports (for example a yarn workspace repo). Strange enough, sometimes, it works fine...\r\n\r\n### Logs\r\n\r\n_No response_",[3014,3017,3018,3019],{"name":3015,"color":3016},"types","2875C3",{"name":2970,"color":2971},{"name":2924,"color":2973},{"name":3020,"color":3021},"upstream","E8A36D",21933,"Component appears to be untyped in template block","2023-12-12T14:36:22Z","https://github.com/nuxt/nuxt/issues/21933",0.7275064,["Reactive",3028],{},["Set"],["ShallowReactive",3031],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGyLlXouBfYSFu8ftRBKRB8AXzArhKmBLLXy8bIPdwNo":-1},"/nuxt/ui/4435"]