\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?",[3164],{"name":3165,"color":3166},"question","d876e3",4892,"ui","Using Nuxt UI in components from a npm package, in Vue","2025-09-05T08:48:22Z","https://github.com/nuxt/ui/issues/4892",0.6864194,{"description":3174,"labels":3175,"number":3183,"owner":3155,"repository":3168,"state":3184,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Description\n\nHi, \nI'm struggling to customize my components when using Nuxt UI within another Nuxt Module, I've search but cannot get it to work, tried with using app.config.ts like below and also within module.ts but no joy, would appreciate if someone could help out.\n\n\n```\nexport default defineAppConfig({\n ui: {\n button: {\n slots: {\n base: 'rounded-full font-semibold cursor-pointer'\n },\n },\n }\n})\n\n```\nMy module.ts file:\n\n```\nimport { defineNuxtModule, installModule, createResolver } from '@nuxt/kit'\n\nexport default defineNuxtModule\u003CModuleOptions>({\n meta: {\n name: 'my-module',\n configKey: 'myModule',\n },\n hooks: {\n 'nitro:config': (nitroConfig) => {\n const { resolve } = createResolver(import.meta.url)\n\n nitroConfig.publicAssets ||= []\n nitroConfig.publicAssets.push({\n dir: resolve('./runtime/images/'),\n maxAge: 60 * 60 * 24 * 365,\n })\n },\n },\n defaults: {},\n async setup(_options, _nuxt) {\n const { resolve } = createResolver(import.meta.url)\n\n\n await installModule('@nuxt/ui')\n await installModule('nuxt-svgo', {\n autoImportPath: resolve('./runtime/icons'),\n defaultImport: 'component',\n componentPrefix: 'i',\n })\n\n _nuxt.options.css.push(resolve('./runtime/style.css'))\n },\n})\n\n```",[3176,3177,3180],{"name":3165,"color":3166},{"name":3178,"color":3179},"v3","49DCB8",{"name":3181,"color":3182},"stale","ededed",3679,"closed","How to override components style globally when using within another Nuxt Module?","2025-06-11T10:32:59Z","https://github.com/nuxt/ui/issues/3679",0.6545318,{"labels":3190,"number":3197,"owner":3155,"repository":3155,"state":3184,"title":3198,"updated_at":3199,"url":3200,"score":3201},[3191,3194],{"name":3192,"color":3193},"enhancement","8DEF37",{"name":3195,"color":3196},"2.x","d4c5f9",8007,".scss files can not use cssModules","2023-01-22T15:52:36Z","https://github.com/nuxt/nuxt/issues/8007",0.6806288,{"description":3203,"labels":3204,"number":3207,"owner":3155,"repository":3168,"state":3184,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Description\n\nI'm using `@nuxt/ui` with Vue as this is what we are using at work and I was wondering how I can add custom collections to the `@nuxt/icon` module but it looks like there is no configuration available compared to the configuration when using Nuxt. Are there plans to support this or any workaround for now that I can use?",[3205,3206],{"name":3165,"color":3166},{"name":3178,"color":3179},4750,"Is there no way to use customCollections in Vue with nuxt/icon?","2025-08-19T07:39:24Z","https://github.com/nuxt/ui/issues/4750",0.6817433,{"description":3213,"labels":3214,"number":3221,"owner":3155,"repository":3155,"state":3184,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Describe the feature\r\n\r\nI wanted to add tailwind module so I ran `nuxi module add tailwind` and it added tailwind package instead of @nuxtjs/tailwindcss but we all know that I actually wanted to add the Tailwind Nuxt module. It would be very convenient if Nuxt was a bit smarter about this and understand what I actually meant.\r\n\r\nAs you can see what Nuxt actually added is completely wrong. Perhaps we could add some aliases to modules so nuxi could install the correct one? That would be very convenient. I have seen other projects do this and it is amazing DX.\r\n\r\nFor example, Symfony projects does this: https://github.com/symfony/recipes#aliases-option\r\n\r\nIt added `tailwind` instead of `@nuxtjs/tailwindcss`\r\n\r\n```diff\r\n \"devDependencies\": {\r\n \"@vueuse/nuxt\": \"^10.9.0\",\r\n+ \"tailwind\": \"^4.0.0\"\r\n }\r\n```\r\n\r\nand\r\n\r\n```diff\r\nexport default defineNuxtConfig({\r\n+ modules: [\"tailwind\"]\r\n})\r\n```\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://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).",[3215,3218],{"name":3216,"color":3217},"3.x","29bc7f",{"name":3219,"color":3220},"pending triage","E99695",26277,"Add module aliases so that running nuxi module add tailwind would actually install @nuxtjs/tailwindcss","2024-03-15T20:10:20Z","https://github.com/nuxt/nuxt/issues/26277",0.6851678,{"description":3227,"labels":3228,"number":3231,"owner":3155,"repository":3168,"state":3184,"title":3178,"updated_at":3232,"url":3233,"score":3234},"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",[3229],{"name":3230,"color":3179},"release",1289,"2025-07-17T12:55:11Z","https://github.com/nuxt/ui/issues/1289",0.6899895,{"description":3236,"labels":3237,"number":3239,"owner":3155,"repository":3155,"state":3184,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Describe the feature\r\n\r\nWhen working with many modules and/or layers, sometimes there can be a regression in the module that breaks the whole Nuxt application.\r\n\r\nFor example, I recently spent a few hours figuring out why the `useRuntimeConfig()` typings were being overridden and resulted in `unknown` causing build to break.\r\n\r\nI have discovered that the module order was problematic: \r\n\r\n```ts\r\n modules: [\r\n \"@nuxt/eslint\",\r\n \"@nuxtjs/i18n\",\r\n \"@nuxt/ui\", // \u003C-- Placing this module after the @nuxtjs/i18n resolves the issue\r\n \"@nuxt/image\",\r\n \"nuxt-security\",\r\n \"@nuxt/fonts\",\r\n \"@vueuse/nuxt\",\r\n \"radix-vue/nuxt\",\r\n \"nuxt-auth-utils\",\r\n \"@nuxtjs/seo\",\r\n \"@vue-final-modal/nuxt\",\r\n \"@vee-validate/nuxt\",\r\n \"nuxt-umami\",\r\n ],\r\n```\r\n\r\nIts unclear which module, technically, has a bug without further investigation, but from the Nuxt side, there should be some checks in place to prevent \"nuxt\" features from being broken by external factors like modules or layers.\r\n\r\n\r\n\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://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).",[3238],{"name":3219,"color":3220},29183,"Improve sanity checks when using modules and layers","2024-09-27T20:12:55Z","https://github.com/nuxt/nuxt/issues/29183",0.69067997,{"description":3245,"labels":3246,"number":3256,"owner":3155,"repository":3168,"state":3184,"title":3257,"updated_at":3258,"url":3259,"score":3260},"### 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. ",[3247,3249,3250,3253,3255],{"name":3192,"color":3248},"a2eeef",{"name":3178,"color":3179},{"name":3251,"color":3252},"triage","ffffff",{"name":3254,"color":3182},"closed-by-bot",{"name":3181,"color":3182},3576,"Support Usage of Nuxt UI 3 in Shadow DOM","2025-06-18T09:01:33Z","https://github.com/nuxt/ui/issues/3576",0.69138646,{"description":3262,"labels":3263,"number":3269,"owner":3155,"repository":3168,"state":3184,"title":3270,"updated_at":3271,"url":3272,"score":3273},"### Description\n\nHi, I am using Vue 3 and trying to dynamically change the theme color of nuxt-ui. I have the following code:\n\n```typescript\nconst appConfig = useAppConfig()\nappConfig.ui.colors.primary = color\n```\nHowever, this doesn’t seem to work as expected. I’m wondering if I’m using it incorrectly. Could you please advise how I can dynamically switch the theme in nuxt-ui in Vue 3?",[3264,3265,3266],{"name":3165,"color":3166},{"name":3178,"color":3179},{"name":3267,"color":3268},"vue","42b883",3952,"Issue with dynamically changing theme colors in Nuxt UI using Vue 3","2025-05-12T13:05:27Z","https://github.com/nuxt/ui/issues/3952",0.69843245,["Reactive",3275],{},["Set"],["ShallowReactive",3278],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5Mwbs8br1wzjac5KG6cw295KZl6HX8bn-7CUnq7Z-Sk":-1},"/nuxt/ui/4118"]