\nI'd really appreciate it if the team considers a more flexible and intuitive API.\n\n### Additional information\n\n- [ ] 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).",[2940,2941],{"name":2922,"color":2923},{"name":2942,"color":2943},"pending triage","E99695",29275,"Better API for Auto Imports Customization","2024-10-08T08:40:01Z","https://github.com/nuxt/nuxt/issues/29275",0.61947787,{"description":2950,"labels":2951,"number":2956,"owner":2931,"repository":2931,"state":2932,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### 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).",[2952,2953],{"name":2922,"color":2923},{"name":2954,"color":2955},"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.6693097,{"labels":2962,"number":2967,"owner":2931,"repository":2931,"state":2968,"title":2969,"updated_at":2970,"url":2971,"score":2972},[2963,2964],{"name":2922,"color":2923},{"name":2965,"color":2966},"3.x","29bc7f",12887,"closed","Allow disabling automatic plugin imports","2025-02-26T12:12:45Z","https://github.com/nuxt/nuxt/issues/12887",0.59068036,{"labels":2974,"number":2975,"owner":2931,"repository":2931,"state":2968,"title":2969,"updated_at":2976,"url":2977,"score":2978},[],12939,"2023-01-19T16:39:55Z","https://github.com/nuxt/nuxt/issues/12939",0.5972617,{"labels":2980,"number":2981,"owner":2931,"repository":2931,"state":2968,"title":2969,"updated_at":2982,"url":2983,"score":2978},[],13038,"2023-01-19T16:42:38Z","https://github.com/nuxt/nuxt/issues/13038",{"labels":2985,"number":2986,"owner":2931,"repository":2931,"state":2968,"title":2969,"updated_at":2987,"url":2988,"score":2978},[],13087,"2023-01-19T16:47:39Z","https://github.com/nuxt/nuxt/issues/13087",{"labels":2990,"number":2991,"owner":2931,"repository":2931,"state":2968,"title":2969,"updated_at":2992,"url":2993,"score":2978},[],13171,"2023-01-19T16:48:28Z","https://github.com/nuxt/nuxt/issues/13171",{"labels":2995,"number":2996,"owner":2931,"repository":2931,"state":2968,"title":2933,"updated_at":2997,"url":2998,"score":2999},[],15843,"2023-01-20T14:16:43Z","https://github.com/nuxt/nuxt/issues/15843",0.6290683,{"labels":3001,"number":3006,"owner":2931,"repository":2931,"state":2968,"title":3007,"updated_at":3008,"url":3009,"score":3010},[3002,3003],{"name":2922,"color":2923},{"name":3004,"color":3005},"2.x","d4c5f9",6169,"Add support for plugin imports add via .addPlugin","2023-01-22T15:50:56Z","https://github.com/nuxt/nuxt/issues/6169",0.63110125,["Reactive",3012],{},["Set"],["ShallowReactive",3015],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQ-XTn0kFnoR2txBsr0Aw2LcAqHuUZ1XmqTptrwPCzSU":-1},"/nuxt/nuxt/11025"]