\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?",[3145],{"name":3146,"color":3147},"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.7171275,{"description":3155,"labels":3156,"number":3163,"owner":3135,"repository":3135,"state":3137,"title":3164,"updated_at":3165,"url":3166,"score":3167},"### Describe the feature\r\n\r\nI have been trying to configure auto-imports for a library of web components, so that i can minimize bundle size without having to manually add imports.\r\n\r\nI tried creating a module like this:\r\n\r\n```ts\r\nimport { defineNuxtModule, addComponent } from 'nuxt/kit'\r\n\r\nexport default defineNuxtModule({\r\n meta: {\r\n name: 'my-components',\r\n compatibility: {\r\n nuxt: '^3.0.0',\r\n },\r\n },\r\n\r\n setup() {\r\n // From the runtime directory\r\n addComponent({\r\n name: 'MyButton',\r\n kebabName: 'my-button',\r\n mode: 'client',\r\n filePath: \"@my/web-components/Button.js\",\r\n })\r\n },\r\n})\r\n```\r\n\r\nHowever, this does not work as `addComponent` (or something downstream of it) expects there to be a vue component at the given path. the problem would exist just the same if I had a web component relative to the module (i.e. not from npm)\r\n\r\nI am wondering if there is any scope to extend `addComponent`/component auto-import behavior to support web components. Since web components typically register themselves, the desired output would be a side-effect import wherever usage of `my-button` was detected. something like this:\r\n\r\n```ts\r\n// rather than this\r\nimport Button from \"@my/web-components/Button.js\"\r\n// we would have this\r\nimport \"@my/web-components/Button.js\"\r\n```\r\n\r\nMy first thought was to add a `sideEffectOnly: boolean` option to `addComponent` as a flag to indicate this is the desired behavior, but i don't think that composes well with other existing options (e.g. what does it mean to have `mode: \"server\"` with `sideEffectOnly: true`?). Therefore perhaps the best option would be a new value for `mode`, since (right now) web components are implicitly client-side. \r\n\r\nI'm sure it's possible to build this behavior outside of nuxt with some custom transforms etc, but i imagine a comprehensive solution would end up recreating most, if not all, of nuxt's existing mechanisms for scanning/importing/tree-shaking components.\r\n\r\nSuch an addition would be useful not just in my use case, but for all web component libraries. Additionally, many WC libraries publish a [manifest of components](https://github.com/webcomponents/custom-elements-manifest) they contain, meaning a generic nuxt module could be written which accepts the manifest as an input, and dynamically calls `addComponent` for each web component found. \r\n\r\nIn summary, my proposal is something like:\r\n\r\n```ts\r\naddComponent({\r\n name: 'my-button',\r\n mode: 'web-component', // the specific value is up for debate\r\n filePath: \"@my/web-components/Button.js\",\r\n})\r\n```\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [X] 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).",[3157,3160],{"name":3158,"color":3159},"enhancement","8DEF37",{"name":3161,"color":3162},"discussion","538de2",25528,"nuxt/kit: ability to configure web components for auto-import","2024-06-30T11:05:58Z","https://github.com/nuxt/nuxt/issues/25528",0.7191254,{"description":3169,"labels":3170,"number":3183,"owner":3135,"repository":3135,"state":3184,"title":3185,"updated_at":3186,"url":3187,"score":3188},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-jldudq?file=modules%2Fregister-component.js\r\n\r\n### Describe the bug\r\n\r\nI'm importing the \"@tabler/icons-vue\" library and I want to globally register some of the icons so I can show them using as dynamic components via `\u003Ccomponent :is=\"a\" />`\r\n\r\nIf global is set to false everything works as expected and i can render the component using it's name.\r\nSetting global to true throws this error:\r\n\r\n`Uncaught SyntaxError: The requested module '/_nuxt/node_modules/@tabler/icons-vue/dist/esm/tabler-icons-vue.mjs?nuxt_component=async&nuxt_component_name=IconAnalyze' does not provide an export named 'IconAnalyze' (at components.plugin.mjs:1:10)`\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3171,3174,3177,3180],{"name":3172,"color":3173},"3.x","29bc7f",{"name":3175,"color":3176},"bug","d73a4a",{"name":3178,"color":3179},"components","05B979",{"name":3181,"color":3182},"🔨 p3-minor","FBCA04",26471,"closed","@nuxt/kit.addComponent fails when using external npm package + global = true","2024-04-03T09:15:37Z","https://github.com/nuxt/nuxt/issues/26471",0.69932747,{"description":3190,"labels":3191,"number":3197,"owner":3135,"repository":3135,"state":3184,"title":3198,"updated_at":3199,"url":3200,"score":3201},"Hi, I am trying to get this awesome framework to work with [vue-awesome](https://github.com/Justineo/vue-awesome) but I can't manage to do it.\r\n\r\nI added this to my nuxt.config.js\r\n`build: {\r\n\t\tvendor: ['vue-awesome']\r\n\t}`\r\n\r\nI added this to my default.vue\r\n\r\n`import Icon from \"vue-awesome/components/Icon.vue\"; \r\n\timport \"vue-awesome/icons\"; `\r\n\r\n`\r\n\texport default {\r\n\t\tcomponents: {\r\n\t\t\tIcon\r\n\t\t}\r\n\t}`\r\n\r\nHowever when I put icon components in my pages, it does not show, but is visible in the chrome dev tools.\r\n\r\nIs there a proper way to do this?\r\n\r\nI am new to Nuxt.\r\nThanks for your help.\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c147\">#c147\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3192,3194],{"name":3146,"color":3193},"cc317c",{"name":3195,"color":3196},"2.x","d4c5f9",174,"Work with vue-awesome","2023-01-18T15:38:32Z","https://github.com/nuxt/nuxt/issues/174",0.7035683,{"description":3203,"labels":3204,"number":3211,"owner":3135,"repository":3135,"state":3184,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Environment\n\n➜ npx nuxi info\r\nNuxi 3.0.0-rc.9 11:55:40\r\nRootDir: /Users/angurias/Developer/helium/sp-product-frontend-2 11:55:42\r\nNuxt project info: 11:55:42\r\n\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.15.1`\r\n- Nuxt Version: `3.0.0-rc.9`\r\n- Nitro Version: `0.5.1`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `ssr`, `typescript`, `srcDir`, `modules`, `css`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@5.3.3`\r\n- Build Modules: `-`\r\n------------------------------\r\n\n\n### Reproduction\n\n- Have lots of components\r\n- Try to import lots of components (not necessarily all of them) via code in a ts file E.G:\r\n```\r\nimport {\r\n IconBasicArrowBottomSmall,\r\n IconBasicArrowDown,\r\n IconBasicArrowLeftSmall,\r\n IconBasicArrowLeft,\r\n IconBasicArrowRightSmall,\r\n IconBasicArrowRight,\r\n IconBasicArrowTopSmall,\r\n IconBasicArrowTop,\r\n IconBasicCalculator,\r\n IconBasicCalendar,\r\n IconBasicCheck,\r\n IconBasicDashboard,\r\n IconBasicEdit,\r\n IconBasicEnter,\r\n IconBasicExit,\r\n IconBasicHelp,\r\n IconBasicHide,\r\n IconBasicShow,\r\n IconBasicTrash,\r\n IconBasicUpload,\r\n IconBasicAlertCircle,\r\n IconBasicCarretDown,\r\n IconBasicCarretLeft,\r\n IconBasicCarretRight,\r\n IconBasicCarretUp,\r\n IconBasicCheckCircle,\r\n IconBasicComment,\r\n IconBasicCreditCard,\r\n IconBasicDots,\r\n IconBasicErrorCircle,\r\n IconBasicHome,\r\n IconBasicInfoCircle,\r\n IconBasicLockClose,\r\n IconBasicLockOpen,\r\n IconBasicMoney,\r\n IconBasicPlusCircleLight,\r\n IconBasicPlus,\r\n IconBasicSlider,\r\n IconBasicTimesCircleLight,\r\n IconBasicTimesCircle,\r\n IconBasicTimes,\r\n IconCalendarCopy,\r\n IconCalendarModFreeze,\r\n IconCalendarModMarkup,\r\n IconCalendarModMax,\r\n IconCalendarModMin,\r\n IconCalendarEuroSmall,\r\n IconCalendarMinusSmall,\r\n IconCalendarPercentSmall,\r\n IconCalendarPlusSmall,\r\n IconCalendarUserAlt,\r\n IconCalendarUser,\r\n IconDashboardBarGraph,\r\n IconDashboardLineGraph,\r\n IconLangDe,\r\n IconLangEn,\r\n IconLangIt,\r\n} from '~~/.nuxt/components'\r\n```\r\n\r\n(In my specific case I'm making a `Map` containing them)\n\n### Describe the bug\n\nMultiple errors can be triggered:\r\n 1. Sometimes it will compile, but an error stating the import is not an html will be triggered\r\n 2. Sometimes it will fail before compile time, stating that one (or multiple) of the components needs to be initialized\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3205,3206,3209],{"name":3172,"color":3173},{"name":3207,"color":3208},"pending triage","E99695",{"name":3210,"color":3182},"needs reproduction",14859,"Autoimported components (~~/.nuxt/components) are not reliable code-wise","2023-01-19T17:41:35Z","https://github.com/nuxt/nuxt/issues/14859",0.70474356,{"labels":3217,"number":3220,"owner":3135,"repository":3135,"state":3184,"title":3221,"updated_at":3222,"url":3223,"score":3224},[3218,3219],{"name":3158,"color":3159},{"name":3195,"color":3196},6169,"Add support for plugin imports add via .addPlugin","2023-01-22T15:50:56Z","https://github.com/nuxt/nuxt/issues/6169",0.7055681,{"description":3226,"labels":3227,"number":3231,"owner":3135,"repository":3135,"state":3184,"title":3232,"updated_at":3233,"url":3234,"score":3235},"### Describe the feature\n\nIn the component library module. \r\nWe should automatically import components in Nuxt3 for users. We always import some style files for this component (\u003Cvar-button> import '../xxx/style'). \r\n\r\n at this link https://github.com/nuxt/module-builder/issues/106. I want to use `addComponentsDir` to replace `addComponent`. Then now I can use `extendComponent` to resolve the Component's alias. \r\n\r\nI want to add an optional prototype to the Component's style file. if anyone needs.\r\n\r\nMaybe It's like \r\n\r\n```javascript\r\nconst dirPath = `${moduleName}/es`;\r\nconst filePath = `${moduleName}/es/${kebabCase(name)}/index`;\r\nconst stylePath = `${moduleName}/es/${kebabCase(name)}/style/index`;\r\n\r\naddComponent({\r\n name: `XXX${name}`,\r\n filePath,\r\n stylePath,\r\n export: `_${name}Component`\r\n})\r\n\r\naddComponentsDir({\r\n path: join(CMD, `node_modules/${dirPath}`),\r\n .......\r\n extendComponent (component) {\r\n const componentName = component.pascalName.replace('Var', '')\r\n return {\r\n ...component,\r\n stylePath: `${component.filePath}/style`\r\n export: `_${componentName}Component`,\r\n }\r\n }\r\n ......\r\n})\r\n```\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).",[3228,3229,3230],{"name":3158,"color":3159},{"name":3161,"color":3162},{"name":3172,"color":3173},25611,"Feature: support style config on addComponent & addComponentsDir","2024-02-09T10:47:38Z","https://github.com/nuxt/nuxt/issues/25611",0.705932,{"description":3237,"labels":3238,"number":3246,"owner":3135,"repository":3149,"state":3184,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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```",[3239,3240,3243],{"name":3146,"color":3147},{"name":3241,"color":3242},"v3","49DCB8",{"name":3244,"color":3245},"stale","ededed",3679,"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.70649576,{"description":3252,"labels":3253,"number":3256,"owner":3135,"repository":3135,"state":3184,"title":3257,"updated_at":3258,"url":3259,"score":3260},"- [x] Initial working version from [@nuxt/components](https://github.com/nuxt/components)\r\n- [x] `.dts` generation\r\n- [x] Decide about prefix\r\n- [x] Implement loader strategy (vite and webpack5) \r\n- [ ] Integrate with devtools\r\n\r\n### Discussion: Should we even have it with nuxt3?\r\n\r\nRelated tweet (https://twitter.com/youyuxi/status/1404795327144763398). I think that makes sense in many ways that auto-import is not that needed with new `\u003Cscript setup>` syntax and better VSCode integrations. But there are still some cases most notable, CMS/Content integrations that implicitly need global components. And also this gives possibility with nuxt devtools component playground\r\n\r\n### Discussion: Where to implement?\r\n\r\nIn `framework/packages/components` as a fork of `nuxt/components` and add by default in `nuxt3`\r\n\r\n### Discussion: Prefixing\r\n\r\nShould we use (by default) one level prefix `components/utils/bar/baz` => `BarBaz` or full prefix => `UtilsBarBaz` or not at all (`Baz`) by default (suggested by @Atinux). Second is much more future proof but less convenient for structuring components dir based on purpose (and atomic designs)",[3254,3255],{"name":3161,"color":3162},{"name":3172,"color":3173},11026,"Components Discovery","2023-01-19T14:46:30Z","https://github.com/nuxt/nuxt/issues/11026",0.71052766,["Reactive",3262],{},["Set"],["ShallowReactive",3265],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnn9Of1Eg3CrmKIPEgRNo8rlBVUXSXc6M7LfARAI9zNU":-1},"/nuxt/ui/4418"]