\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3159,3162],{"name":3160,"color":3161},"feature","A27AF6",{"name":3163,"color":3147},"v3",3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.7218664,{"description":3170,"labels":3171,"number":3175,"owner":3149,"repository":3150,"state":3151,"title":3176,"updated_at":3177,"url":3178,"score":3179},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nHi!\n\nI am using the Nuxt UI v4 Figma kit in collaboration with a designer and a front-end + back-end developer.\nWe thank you for the design system! Global and local variables, components, and a generous library help us out a lot.\n\nWe ran into a problem we didn't find information on.\nHow does Nuxt officially recommend the design hand-off to development from Figma?\n\nDo you have any ideas, recommendations or documentation?\n\nBest regards\nGreg Mikael Juhanson\n+372 505 0580",[3172],{"name":3173,"color":3174},"question","d876e3",4884,"Design hand-off to Development","2025-09-03T11:47:56Z","https://github.com/nuxt/ui/issues/4884",0.7351913,{"description":3181,"labels":3182,"number":3184,"owner":3149,"repository":3150,"state":3151,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Package\n\nv3.x\n\n### Description\n\nSo I've created a nuxt module npm package to share components / composable, between two applications. One is Nuxt, one is plain Vue. Now i'm using Nuxt UI is some of those components. When installing this module in the Nuxt application the components work fine, but in Vue I'm having trouble getting them recognized.\n\nI've added a \"components\" -> \"dist/runtime/components\" export to the package and I'm directly importing the .vue files in Vue, Nuxt UI is installed in the application. But I'm getting the following:\n\n\u003Cimg width=\"678\" height=\"112\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3f2dde28-d661-4a3e-b79d-79a9505a1da0\" />\n\nI'm also using UModal, UCard elsewhere in the app itself, they do work there.\nSo what do I need to do to get these files parsed my vite/vue/nuxt ui?",[3183],{"name":3173,"color":3174},4892,"Using Nuxt UI in components from a npm package, in Vue","2025-09-05T08:48:22Z","https://github.com/nuxt/ui/issues/4892",0.7439411,{"description":3190,"labels":3191,"number":3194,"owner":3149,"repository":3150,"state":3195,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Description\n\nThe last update to the Nuxt UI v3 Design Kit was 7 months ago. I’d like to use the latest features that have been added to Nuxt UI in my designs. Will the design kit be updated to include these new features?",[3192,3193],{"name":3173,"color":3174},{"name":3163,"color":3147},4827,"closed","Will the Nuxt 3 Figma Kit receive future updates?","2025-08-26T09:45:59Z","https://github.com/nuxt/ui/issues/4827",0.658978,{"description":3201,"labels":3202,"number":3204,"owner":3149,"repository":3150,"state":3195,"title":3163,"updated_at":3205,"url":3206,"score":3207},"The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.\n\n---\n\nA lot has changed since `@nuxt/ui` was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.\n\nI'll post regular updates on this issue and on https://twitter.com/benjamincanac.\n\n## Documentation\n\nhttps://ui3.nuxt.dev\n\n## Roadmap (Nov 20, 2024)\n\n- [x] Finish the migration to `reka-ui@alpha` on `@nuxt/ui` & `@nuxt/ui-pro` #2448\n- [x] Write the docs for implemented `@nuxt/ui-pro` components\n- [x] Finish `@nuxt/ui-pro` components\n- [x] Make Nuxt UI Pro v3 work with Vue like Nuxt UI https://github.com/nuxt/ui-pro/pull/742\n- [ ] Implement new components in `@nuxt/ui` like\n - [x] `Calendar` #2618\n - [ ] `InputDate` #2524\n - [x] `Tree` #3180\n - [x] `Stepper` #2733\n- [x] Migrate all the Nuxt UI Pro templates\n - [x] Starter\n - [x] Landing\n - [x] Docs\n - [x] SaaS https://github.com/nuxt-ui-pro/saas/pull/86\n - [x] Dashboard https://github.com/nuxt-ui-pro/dashboard/pull/86\n- [ ] Build the Nuxt UI docs marketing pages\n - [x] Landing\n - [x] Figma\n - [x] Pro -> Landing\n - [x] Pro -> Pricing\n - [x] Pro -> Templates\n - [x] Pro -> Activate\n - [ ] Releases\n- [x] Write migration guide https://ui3.nuxt.dev/getting-started/migration\n- [x] Release `@nuxt/ui` & `@nuxt/ui-pro` officially once `tailwindcss` and `reka-ui` are released\n- [x] Migrate all the Nuxt apps (nuxt.com, image.nuxt.com, eslint.nuxt.com, devtools.nuxt.com, fonts.nuxt.com, hub.nuxt.com, nuxt.studio, etc.)\n- [ ] Implement new `@nuxt/ui` & `@nuxt/ui-pro` components\n- [ ] Create new templates like Changelog, Portfolio, etc. \n\n## Breaking Changes\n\nThe biggest change is the switch to `tailwind-variants`, this will cause lots of breaking changes if you've used the `ui` prop or `app.config.ts` to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.\n\n> At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced `tailwind-merge` which now allows us to group those keys together, this is a good opportunity to clean the whole thing. \n\nThe config will now have a `slots` amongst other keys that will specifically target dom nodes. The `ui` prop will only allow you to target those slots.\n\nThese changes alongside the refactor of all components will also improve the types, the `app.config.ts` and `ui` props are now perfectly typed, as well as all components `props`, `slots`, `emits` and `expose`.\n\n> Feel free to comment on this if you have any ideas for the next major.\n\n```[tasklist]\n### Components\n- [x] Accordion\n- [x] Alert\n- [x] Avatar\n- [x] AvatarGroup\n- [x] Badge\n- [x] Breadcrumb\n- [x] Button\n- [x] ButtonGroup\n- [x] Card\n- [x] Carousel\n- [x] Checkbox\n- [x] Chip\n- [x] Collapsible\n- [x] CommandPalette\n- [x] Container\n- [x] ContextMenu\n- [x] Drawer\n- [x] DropdownMenu (Dropdown)\n- [x] Form\n- [x] FormField (FormGroup)\n- [x] Icon\n- [x] Input\n- [x] InputMenu\n- [x] Kbd\n- [x] Link\n- [x] Modal\n- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)\n- [x] Pagination\n- [x] Popover\n- [x] Progress\n- [x] Provider\n- [x] RadioGroup\n- [x] Select\n- [x] SelectMenu\n- [x] Separator (Divider)\n- [x] Skeleton\n- [x] Slideover\n- [x] Slider (Range)\n- [x] Table\n- [x] Tabs\n- [x] Textarea\n- [x] Toast (Notification)\n- [x] Switch (Toggle)\n- [x] Tooltip\n```\n",[3203],{"name":3146,"color":3147},1289,"2025-07-17T12:55:11Z","https://github.com/nuxt/ui/issues/1289",0.7134733,{"description":3209,"labels":3210,"number":3212,"owner":3149,"repository":3150,"state":3195,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Description\n\nHello, I have read that with the Vercel and Nuxt collaboration that Nuxt UI/Pro will be licence free relatively soon and an new version will be create `v4`. My questions is, can we alreay make v3 license free because of this changes or do we need to wait for v4?\n\nThank you",[3211],{"name":3173,"color":3174},4595,"Nuxt UI Pro - Vercel and licence free on build?","2025-07-26T11:28:35Z","https://github.com/nuxt/ui/issues/4595",0.7412514,{"description":3218,"labels":3219,"number":3226,"owner":3149,"repository":3149,"state":3195,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### 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_",[3220,3223],{"name":3221,"color":3222},"3.x","29bc7f",{"name":3224,"color":3225},"pending triage","E99695",24872,"Nuxt3 props and refs weird behaviour","2023-12-22T16:00:35Z","https://github.com/nuxt/nuxt/issues/24872",0.7431225,{"description":3232,"labels":3233,"number":3238,"owner":3149,"repository":3149,"state":3195,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Environment\n\nNuxt project info: 14:07:45\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v18.12.0`\r\n- Nuxt Version: `3.1.0`\r\n- Nitro Version: `2.0.0`\r\n- Package Manager: `npm@8.12.1`\r\n- Builder: `vite`\r\n- User Config: `app`, `components`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\n[Repro Repo](https://github.com/tamutus/nuxt3-clientonly-missing-data)\n\n### Describe the bug\n\nWhat follows below is the same as the repo readme:\r\n\r\n### Nuxt 3 bug reproduction: Client-only component's root element missing data attribute for itself.\r\n\r\nTo reproduce this bug, I created a new nuxt 3 project, set up two pages with links to each other, and added two components: one with a root element that has a class, which successfully applies relevant styles, and a clone of that component suffixed with `.client.vue` . When you load the app or manually enter a URL, both data nonces (for the parent and child component style scopes) load correctly for the root element of the normal component in question. The .client-suffixed component fails to do this on app load, and instead has only the style scope data attr from the parent component/page. Yet, the behavior will be the same as the regular component upon file-save HMR or navigation between pages. As refreshing resets the app, the orange text will lose its style.\r\n\r\nI noticed that this can be solved by simply not applying scoped styles to the root component - making the current easiest workaround to wrap the contents of the component in a plain old `\u003Cdiv>`.\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3234,3235],{"name":3221,"color":3222},{"name":3236,"color":3237},"🔨 p3-minor","FBCA04",18521,"Root element of .client components missing own data scope on site load","2023-01-26T06:25:23Z","https://github.com/nuxt/nuxt/issues/18521",0.74351865,{"description":3244,"labels":3245,"number":3250,"owner":3149,"repository":3149,"state":3195,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Versions\r\n\r\n- nuxt: v2.15.4\r\n- node: v15.4.0\r\n\r\n### Reproduction\r\n\r\nI have notifications that get populated through Vuex. While running my `dev` server everything works fine. The vuex store and computed properties stay in sync. The problem emerges when I run `nuxt build` then `nuxt start`. With the Vue Devtools I see the state is updated but the component and Vuex-bindings are not. \r\n\r\nHere's the template along with computed properties:\r\n\u003Cimg width=\"731\" alt=\"Screen Shot 2021-04-29 at 9 59 22 AM\" src=\"https://user-images.githubusercontent.com/6901655/116563109-b8faaf80-a8d1-11eb-9a5a-d9d562085c4d.png\">\r\n\r\n\u003Cimg width=\"691\" alt=\"Screen Shot 2021-04-29 at 9 59 35 AM\" src=\"https://user-images.githubusercontent.com/6901655/116563122-bb5d0980-a8d1-11eb-8776-459667200085.png\">\r\n\r\nHere's my Vue DevTools saying that the state is populated: \r\n\u003Cimg width=\"714\" alt=\"Screen Shot 2021-04-29 at 10 01 57 AM\" src=\"https://user-images.githubusercontent.com/6901655/116563515-1858bf80-a8d2-11eb-961b-5d73f1b5ed83.png\">\r\n\r\nThe component binding on my getter is not seeing the same thing. Looking at that component. \r\n\u003Cimg width=\"324\" alt=\"Screen Shot 2021-04-29 at 10 02 17 AM\" src=\"https://user-images.githubusercontent.com/6901655/116563601-2d355300-a8d2-11eb-9725-e1164e78c67d.png\">\r\n\r\nIn my nuxt.config \r\n` ssr: true`\r\n\r\n\r\n### What is Expected?\r\nI'm expecting my component to see the change in Vuex after the build process.\r\n\r\n\r\n### What is actually happening?\r\nVuex is modified, but the getters and the component itself don't see the update even with a watch on the store setup.\r\n\r\nI'll work on getting a reproduction of this in an example repo over the next few hours. I've been stuck on this issue the past two days and hopefully, someone can point me in the right direction. Thank you.\r\n\r\n",[3246,3247],{"name":3224,"color":3225},{"name":3248,"color":3249},"2.x","d4c5f9",9216,"Nuxt component not updated with Vuex Store.","2023-01-22T15:44:51Z","https://github.com/nuxt/nuxt/issues/9216",0.7441485,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f82v3qc0UFsq6Bf7kInK17hlV6p9owchr762izAvFivI":-1},"/nuxt/ui/4212"]