\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?",[3157],{"name":3158,"color":3159},"question","d876e3",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.7107997,{"description":3166,"labels":3167,"number":3173,"owner":3147,"repository":3147,"state":3149,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Describe the feature\n\nHey I am currently moving a big project from standard vue3 to nuxt, and have to rewrite most of my options api code to composition api..\r\n\r\nThe issue mostly is that some features are not there in composition api and when one is missing i can't \"link\" it to options api and then i got to go down the rabbit hole of changing my code to use composition api although it's already completely valid options api code.\r\n\r\nFor real, props, it is an awesome framework and it's very impressive etc.\r\n\r\nBUT.... in my opinion, it is kind of weird that it does not fully support vue (from my pov) as i do have to use so much \"special\" vue code instead of easily porting my app.\r\n\r\nI am still continuing to use nuxt for now but if you were able to make the transition a bit easier, i think a lot of people would use nuxt instead of plain old vue 3.\r\n\r\nI am willing to help with the adoption by saying what needs to happen (for a project like mine) to be easily portable to nuxt, if that is helpful.\r\n\r\nLmk what u think :) \n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3168,3170],{"name":3138,"color":3169},"8DEF37",{"name":3171,"color":3172},"🍰 p2-nice-to-have","0E8A16",21670,"Missing Support (Or documentation of) Options API with Nuxt","2024-06-30T11:08:29Z","https://github.com/nuxt/nuxt/issues/21670",0.7231784,{"description":3179,"labels":3180,"number":3185,"owner":3147,"repository":3148,"state":3149,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Description\n\nDiscovering **Nuxt UI** and **Nuxt UI Pro** has been one of the highlights of 2024 for me. These libraries have saved me countless hours while delivering polished, tested, and consistent components that elevate the aesthetic and functional quality of my projects. I admire the exceptional work being done by @benjamincanac and the team, particularly with the ambitious mission of rewriting the library to embrace both TailwindCSS v4 and Reka UI within Nuxt UI v3.\n\nOne of the standout features in v3 has been the integration of **TanStack Tables** into the `UTable` component, adding to tables many new features and possibilities. However, after some usage in real-world scenarios, I’ve noticed a gap: a wider variety of input components.\n\nI know that v3 is still in alpha, but I’d like to propose a new initiative for a future release, which I’m calling \"**The Inputs Update**\". This RFP could focus on identifying and implementing input components that would further enhance the library’s usability and versatility.\n\nAdditionally, this aligns with a prior suggestion to categorize form-related components separately within the documentation (#3019).\n\n## New Components\n\n- [ ] **`UInputCurrency`**\nWhile `UInputNumber` provides basic formatting options, a dedicated `UInputCurrency` component would offer enhanced functionality for handling monetary inputs, especially in scenarios requiring localized formatting.\n\n _Related: #1704_\n\n- [ ] **`UInputColor`**\nCurrently, there is an [example](https://ui3.nuxt.dev/getting-started#as-a-color-chooser) in `UColorPicker`, but it feels verbose and lacks certain key features, such as a text input for users to paste HEX or RGB values. \u003Cbr>\u003Cimg width=\"168\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3c11e311-aaa0-4db1-995f-80b15f04ceb7\" />\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_",[3181,3184],{"name":3182,"color":3183},"feature","A27AF6",{"name":3141,"color":3142},3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.7366523,{"description":3191,"labels":3192,"number":3195,"owner":3147,"repository":3148,"state":3196,"title":3141,"updated_at":3197,"url":3198,"score":3199},"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",[3193],{"name":3194,"color":3142},"release",1289,"closed","2025-07-17T12:55:11Z","https://github.com/nuxt/ui/issues/1289",0.702961,{"description":3201,"labels":3202,"number":3212,"owner":3147,"repository":3147,"state":3196,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.7.3\r\n- CLI Version: 3.8.3\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: build\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-wn9aqn\r\n\r\n1. Run `npm run build`\r\n2. Observe that you get `Could not load raw:./VCode.css (imported by node_modules/vuetify/lib/components/VCode/index.mjs): ENOENT: no such file or directory, open './VCode.css'`. It seems as if it gets the \"./\" (current directory part) wrong and tries to load it as if it's from project root instead of inside node_modules which is where it actually exists.\n\n### Describe the bug\n\nI wanted to add some types by doing `import * as components from \"vuetify/components\"` and generating some nice little types for that, but nuxt started crashing build for me when I used the types in a class, and `new`'d that class in the server api.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3203,3206,3209],{"name":3204,"color":3205},"3.x","29bc7f",{"name":3207,"color":3208},"pending triage","E99695",{"name":3210,"color":3211},"nitro","bfd4f2",23210,"Nuxt cannot build `import * as components from \"vuetify/components\"` when used in both client/server","2024-04-20T01:12:16Z","https://github.com/nuxt/nuxt/issues/23210",0.72078973,{"description":3218,"labels":3219,"number":3223,"owner":3147,"repository":3147,"state":3196,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Describe the feature\r\n\r\nCurrently it is not possible to have a server only component or client only component when importing them explicitly (such as `import Client from '@/Client.client.vue'` or `import ServerComp from \"../../ServerComp.server.vue\"`.\r\nTransforming them when explicitly imported makes more sense \r\n\r\nThis is a feature/fix that could possibly break some apps so it may be better to have it in nuxt 4.\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3220,3221,3222],{"name":3138,"color":3169},{"name":3204,"color":3205},{"name":3171,"color":3172},27114,"Transform components imported by explicit import","2024-06-28T10:40:46Z","https://github.com/nuxt/nuxt/issues/27114",0.7243197,{"description":3229,"labels":3230,"number":3238,"owner":3147,"repository":3147,"state":3196,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Describe the feature\r\n\r\nCan you allow import nuxt component into a basic vue app\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3231,3234,3235],{"name":3232,"color":3233},"discussion","538de2",{"name":3204,"color":3205},{"name":3236,"color":3237},"needs details","493824",15584,"Use Nuxt component in vue app","2023-02-06T10:29:55Z","https://github.com/nuxt/nuxt/issues/15584",0.72685707,{"description":3244,"labels":3245,"number":3254,"owner":3147,"repository":3148,"state":3196,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Description\n\nNuxt UI 3 components currently do not fully support usage within a Shadow DOM environment. TBH i don't know if this is even feasible but opening this for discussion. \n\n### Additional context\n\nI am trying to use Nuxt/ui inside chrome extension content script. During my testing, styles are applied as required, but functionality is broken. ",[3246,3247,3248,3249,3252],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},{"name":3250,"color":3251},"closed-by-bot","ededed",{"name":3253,"color":3251},"stale",3576,"Support Usage of Nuxt UI 3 in Shadow DOM","2025-06-18T09:01:33Z","https://github.com/nuxt/ui/issues/3576",0.7297892,{"labels":3260,"number":3263,"owner":3147,"repository":3147,"state":3196,"title":3264,"updated_at":3265,"url":3266,"score":3267},[3261,3262],{"name":3204,"color":3205},{"name":3207,"color":3208},13547,"Dynamic component with auto imported components (component is)","2023-01-19T16:59:16Z","https://github.com/nuxt/nuxt/issues/13547",0.7322042,["Reactive",3269],{},["Set"],["ShallowReactive",3272],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZPx58OW05qpc8kzv1ZWQItfB1wFjEydvs1evvExvW_A":-1},"/nuxt/ui/4245"]