\n \u003C/slot> \n```\n\n### Additional context\n\nI believe this is common throughout the library, and was wondering to post this issue or not given that there might already be a specific reason. But alas, I couldn't find one in the issues.\n\ncc, from #4411",[3018,3021,3024],{"name":3019,"color":3020},"enhancement","a2eeef",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"triage","ffffff",4435,"nuxt","ui","open","InputNumber increment/decrement button props not being passed to their respective slots","2025-07-01T17:13:20Z","https://github.com/nuxt/ui/issues/4435",0.7391406,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3029,"state":3030,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### Description\n\n\n## Problem\n\nCurrently, there's no straightforward way to disable anchor links for specific MDC component instances. The existing approaches have significant limitations:\n\n1. **Global `mdc` config in `nuxt.config.ts` is ignored** when using `@nuxt/ui-pro` with `mdc: true`\n2. **app.config.ts prose configuration affects all MDC components globally**, requiring extensive slot overrides\n3. **No component-level control** over anchor link behavior\n\n## Current Workaround\n\nTo disable anchor links, I currently need to configure every heading level in `app.config.ts`:\n\n```typescript\nexport default defineAppConfig({\n uiPro: {\n prose: {\n h1: {\n slots: {\n base: 'mt-0',\n link: 'cursor-default',\n leading: 'hidden p-0',\n leadingIcon: 'hidden'\n }\n },\n h2: {\n slots: {\n base: 'mt-0',\n link: 'cursor-default', \n leading: 'hidden p-0',\n leadingIcon: 'hidden'\n }\n },\n // ... repeat for h3-h6\n }\n }\n})\n```\n\nThis affects **all** MDC components across the entire application.\n\n\n## Proposed Solution\n\nAllow component-level UI configuration via a `:ui` prop on the `\u003CMDC>` component:\n\n```html\n\u003C!-- Disable anchor links for this specific instance -->\n\u003CMDC \n :value=\"content\" \n :ui=\"{ \n prose: { \n anchors: false \n } \n }\" \n/>\n\n\u003C!-- Or more granular control -->\n\u003CMDC \n :value=\"content\"\n :ui=\"{\n prose: {\n h1: { leading: 'hidden', leadingIcon: 'hidden' },\n h2: { leading: 'hidden', leadingIcon: 'hidden' }\n }\n }\"\n/>\n```\n\n## Use Case\n\n**Displaying AI/LLM generated content** where anchor links are undesirable:\n- Game interfaces showing AI-generated text\n- Chat applications with LLM responses \n- Content previews or excerpts\n- Educational tools displaying sample outputs\n\nIn these scenarios, anchor links serve no purpose and can be distracting or break the user experience.\n\n## Expected Behavior\n\n- Component-level `:ui` prop should merge with global prose configuration\n- Should work consistently with both `@nuxt/content` and standalone MDC usage\n- Should not require global configuration changes for per-component customization\n\n## Current Versions\n\n- `@nuxt/ui-pro` (v3)\n- 'uiPro.mdc' set to true or false in `nuxt.config` does not make a difference\n\n## Additional Context\n\nThis would align with Nuxt UI's existing pattern of allowing component-level customization via `:ui` props, providing developers with fine-grained control while maintaining sensible defaults.\n\n### Additional context\n\n_No response_",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4216,"Allow disabling anchor links per MDC component instance via :ui prop","2025-05-24T15:32:22Z","https://github.com/nuxt/ui/issues/4216",0.7691343,{"description":3047,"labels":3048,"number":3054,"owner":3028,"repository":3029,"state":3055,"title":3056,"updated_at":3057,"url":3058,"score":3059},"### Environment\n\nhttps://ui.nuxt.com/components/input-number#step\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n1. If `step = 2` and I manually set the `value = 3`, the input automatically adjusts the value to `4` (nearest multiple of 2).\n2. If I change the `step = 3` and manually set the `value = 5`, the input automatically adjusts it to `6` (nearest multiple of 3).\n\n### Description\n\nhttps://ui.nuxt.com/components/input-number#step\n\n1. The step should only control the step size when increasing or decreasing the value.\n2. If I set the `value = 3` with `step = 2`, the increments should go as `3, 5, 7, 9, ...` and decrements should go as `3, 1, -1, -3, ...`\n3. The component should not force the value to the nearest multiple of the step.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3049,3052,3053],{"name":3050,"color":3051},"bug","d73a4a",{"name":3022,"color":3023},{"name":3025,"color":3026},4323,"closed","UInputNumber Step - Step should define increment/decrement value, not force multiples","2025-06-25T07:43:40Z","https://github.com/nuxt/ui/issues/4323",0.7024174,{"description":3061,"labels":3062,"number":3066,"owner":3028,"repository":3029,"state":3055,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### 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.",[3063,3064,3065],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4411,"Button to reset input number to default value","2025-06-30T06:06:01Z","https://github.com/nuxt/ui/issues/4411",0.72081894,{"description":3072,"labels":3073,"number":3083,"owner":3028,"repository":3029,"state":3055,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Description\n\n``` vue.js\n\n\u003Ctemplate>\n \u003Cdiv class=\"mt-4 w-full\">\n \u003CUTable :data=\"combinationRows\" :columns=\"columns\" ref=\"table\">\n \u003Ctemplate #price-cell=\"{ row }\">\n \u003Cp>{{ row.original.price }}\u003C/p>\n \u003CUInput v-model=\"row.original.price\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #promotional-price-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.promotionalPrice\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #inventory-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.inventory\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #warning-inventory-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.warningInventory\" type=\"number\" />\n \u003C/template>\n \u003Ctemplate #sku-cell=\"{ row }\">\n \u003CUInput v-model=\"row.original.sku\" />\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\n \u003Cp>{{ combinationRows }}\u003C/p>\n\u003C/template>\n\n\n\u003Cscript lang=ts setup>\n\nconst columns: TableColumn\u003CCombinationRow>[] = [\n {\n accessorKey: 'color',\n header: 'color'\n },\n {\n accessorKey: 'size',\n header: 'size'\n },\n {\n id: 'price',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Price'), // Header Text\n h(UButton, {\n size: 'xs', \n color: 'neutral',\n variant: 'ghost', \n icon: 'i-hugeicons:copy-01', \n 'aria-label': 'Price information', \n class: 'cursor-pointer', \n \n onclick: () => {\n console.log('Price button clicked');\n\n if (combinationRows.value.length > 0) {\n const firstRowPrice = combinationRows?.value?.[0]?.price ?? '0';\n combinationRows.value.forEach(row => {\n row.price = firstRowPrice;\n });\n triggerRef(combinationRows); // Force table update - important for reactivity\n \n } else {\n console.warn('No rows available to copy price from.');\n }\n }\n },\n )\n ])\n },\n {\n id: 'promotional-price',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'promotional price'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'inventory',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Inventory'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'warning-inventory',\n header: () => h('div', { class: 'flex items-center gap-1' }, [\n h('span', 'Warning Inventory value'), // Header Text\n h(UButton, {\n size: 'xs', // Adjust button size as needed\n color: 'neutral', // Style the button to be less prominent\n variant: 'ghost', // Make it a ghost button style\n icon: 'i-hugeicons:copy-01', // Icon from your icon set\n 'aria-label': 'Price information', // Accessibility label\n class: 'cursor-pointer', // Override default button padding and margin\n // Set to false if you only want to show the icon and no text on the button itself. If you want text *on* the button, remove this and adjust the children of h(UButton)\n onclick: () => {\n console.log('Price button clicked');\n }\n },\n /* if you want text *on* the button instead of tooltip, you could add slot content here, e.g., () => 'Info' */\n )\n ])\n },\n {\n id: 'sku',\n header: 'SKU number'\n }\n];\n\n\u003C/script>\n```\n\nwhen updating price to all rows in onClick (see onClick for price above) it does not update UInput in all rows\nalthough i can see \u003Cp>{{ combinationRows }}\u003C/p> getting updated. The question is how can i update price to all rows. using v3.0.0-alpha.13",[3074,3077,3078,3081],{"name":3075,"color":3076},"question","d876e3",{"name":3022,"color":3023},{"name":3079,"color":3080},"closed-by-bot","ededed",{"name":3082,"color":3080},"stale",3381,"Uinput not updating inside UTable rows","2025-06-18T09:01:59Z","https://github.com/nuxt/ui/issues/3381",0.72536457,{"description":3089,"labels":3090,"number":3098,"owner":3028,"repository":3029,"state":3055,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.4\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, nuxt-auth-sanctum@0.5.2, @vueuse/nuxt@11.3.0, nuxt-file-storage@0.2.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.14.1592\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst bill = defineModel()\nconst calcStep = (value: int): int => value \u003C 1000 ? 100 : 500\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex gap-4 items-center\">\n от \u003CUInputNumber v-model=\"bill.from\" :min=\"0\" :max=\"bill.to || 10000\" :step=\"calcStep(bill.from)\" variant=\"soft\" class=\"max-w-32\" />\n до \u003CUInputNumber v-model=\"bill.to\" :min=\"bill.from\" :max=\"10000\" :step=\"calcStep(bill.to)\" variant=\"soft\" class=\"max-w-32\" />\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nhttps://skr.sh/vT5m5gCX1Bk\n\nThe value changes when clicking outside the field, regardless of the `step` and `modelValue` state. The `step` parameter is also calculated incorrectly at the threshold of 1000.",[3091,3092,3095,3096,3097],{"name":3050,"color":3051},{"name":3093,"color":3094},"needs reproduction","CB47CF",{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":3079,"color":3080},2859,"UInputNumber changes value on blur when not asked for","2025-06-19T02:15:22Z","https://github.com/nuxt/ui/issues/2859",0.7350375,{"description":3104,"labels":3105,"number":3109,"owner":3028,"repository":3029,"state":3055,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.0.0-beta.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nHere's a demo (https://codesandbox.io/p/devbox/nuxtui3-bug-3432-sphrpl)\n\n**index.vue**\n```\n\u003Ctemplate>\n \u003CUContainer>\n \u003CFooModal @some-action=\"fnHandleAction\" /> \u003Cbr />\n \u003CUButton @click=\"fnOpenModal\">Open FooModal from code\u003C/UButton>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n import { FooModal } from '#components';\n\n const overlay = useOverlay();\n\n const foo = overlay.create(FooModal);\n\n const fnOpenModal = async () => {\n foo.open();\n };\n\n const fnHandleAction = (action) => {\n console.log(\"Handle FooModal action: \", action);\n };\n\u003C/script>\n```\n\n**FooModal**\n```\n\u003Ctemplate>\n \u003CUModal v-model:open=\"open\" title=\"Foobar\">\n \u003CUButton label=\"Open FooModal from modal\" color=\"neutral\" variant=\"subtle\" />\n\n \u003Ctemplate #body>\n \u003CUButton @click=\"click()\" >Submit\u003C/UButton>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n const open = ref(false);\n\n const emits = defineEmits(['some-action']);\n\n const click = () => {\n console.log(\"clicked from inside the modal\");\n emits('some-action', 'closing'); //emits does not work if Modal opened using useOverlay.\n open.value = false; //closing modal does not work if Modal opened using useOverlay.\n };\n\u003C/script>\n```\n\n### Description\n\nHello Nuxt UI team,\n\nThank you for providing a high-quality UI library. I truly appreciate the effort you put into creating and maintaining it.\n\nI have encountered an issue while using `UModal` in my application. The modal is used to create and/or update database entries, and it needs to be opened in two different ways:\n\n1. Via a `UButton` that is always present on the screen (provided by the modal itself).\n2. Programmatically, through a link in a dropdown menu, using `useOverlay`.\n\nWhen the modal is opened using the first method, everything works as expected. However, when it is opened programmatically using the second method, the modal does not behave the same way. Specifically:\n\n- I am unable to trigger an `emit` to notify the parent component that the update was successful.\n- The modal does not close properly using the `open.value = false` technique.\n\nI am unsure if this behavior is intentional or a bug. I was under the impression that `UModal` and `useOverlay` should work seamlessly together and exhibit consistent behavior. Could you please confirm whether this is a valid concern?\n\nThank you for your time and attention to this matter. I look forward to your guidance.\n\n**Note**: You'll also notice that the button within the modal appears on the screen when opened using `useOverlay`. It would be helpful if it could be hidden automatically, but I believe this is something I can control easily. As such, I do not consider this to be a bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3106,3107,3108],{"name":3050,"color":3051},{"name":3022,"color":3023},{"name":3025,"color":3026},3432,"UModal and useOverlay compatibility Issue","2025-03-11T13:57:03Z","https://github.com/nuxt/ui/issues/3432",0.75624055,{"description":3115,"labels":3116,"number":3119,"owner":3028,"repository":3029,"state":3055,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.19.1\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, css, future, compatibilityDate, vite\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-bsi7gjhw?file=app%2Fapp.vue\n\n### Description\n\nThe UInput component behaves the same way whether using `v-model` or just `:modelValue`—it retains input values when typed into. However, this is incorrect because I did not set up the `@update:modelValue` event\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3117,3118],{"name":3050,"color":3051},{"name":3022,"color":3023},4355,"The UInput component is not a controlled component","2025-06-16T10:45:31Z","https://github.com/nuxt/ui/issues/4355",0.75728077,{"labels":3125,"number":3131,"owner":3028,"repository":3028,"state":3055,"title":3132,"updated_at":3133,"url":3134,"score":3135},[3126,3128],{"name":3019,"color":3127},"8DEF37",{"name":3129,"color":3130},"3.x","29bc7f",14505,"allow disabling auto imports","2024-04-16T07:56:52Z","https://github.com/nuxt/nuxt/issues/14505",0.7594605,{"labels":3137,"number":3142,"owner":3028,"repository":3028,"state":3055,"title":3143,"updated_at":3144,"url":3145,"score":3146},[3138,3139],{"name":3019,"color":3127},{"name":3140,"color":3141},"2.x","d4c5f9",5073,"Loading is prohibited on the pages","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/5073",0.76116276,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0N2nFZdnOEKlMEiDQLLSwS_3ADvyvjh8zARMoZUlSLc":-1},"/nuxt/ui/3159"]