\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).",[3018,3021],{"name":3019,"color":3020},"enhancement","8DEF37",{"name":3022,"color":3023},"pending triage","E99695",29275,"nuxt","open","Better API for Auto Imports Customization","2024-10-08T08:40:01Z","https://github.com/nuxt/nuxt/issues/29275",0.61123466,{"description":3032,"labels":3033,"number":3038,"owner":3025,"repository":3025,"state":3026,"title":3039,"updated_at":3040,"url":3041,"score":3042},"### 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).",[3034,3035],{"name":3019,"color":3020},{"name":3036,"color":3037},"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.64571565,{"labels":3044,"number":3045,"owner":3025,"repository":3025,"state":3046,"title":3047,"updated_at":3048,"url":3049,"score":3050},[],12942,"closed","composable auto import improvements","2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12942",0.4593154,{"labels":3052,"number":3060,"owner":3025,"repository":3025,"state":3046,"title":3047,"updated_at":3061,"url":3062,"score":3063},[3053,3054,3057],{"name":3019,"color":3020},{"name":3055,"color":3056},"3.x","29bc7f",{"name":3058,"color":3059},"dx","C39D69",12789,"2023-01-19T16:40:15Z","https://github.com/nuxt/nuxt/issues/12789",0.469279,{"labels":3065,"number":3070,"owner":3025,"repository":3025,"state":3046,"title":3071,"updated_at":3072,"url":3073,"score":3074},[3066,3067,3068,3069],{"name":3019,"color":3020},{"name":3036,"color":3037},{"name":3055,"color":3056},{"name":3058,"color":3059},11862,"`composables/` directory with auto discovery and import","2023-01-19T15:58:25Z","https://github.com/nuxt/nuxt/issues/11862",0.61915416,{"labels":3076,"number":3079,"owner":3025,"repository":3025,"state":3046,"title":3080,"updated_at":3081,"url":3082,"score":3083},[3077,3078],{"name":3019,"color":3020},{"name":3055,"color":3056},12790,"Support `global: false` for components","2023-01-19T16:35:12Z","https://github.com/nuxt/nuxt/issues/12790",0.6379259,{"description":3085,"labels":3086,"number":3092,"owner":3025,"repository":3025,"state":3046,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Describe the feature\n\nI've been enjoying the DX of auto-imported components and composables ever since the release of those packages for Vue and I'm happy it's auto-configured for Nuxt.\r\n\r\nAs for the next step, would it be possible to **selectively** auto-import types? There's no point in auto-importing everything because large apps would just have too many types clogging the IDE and there would be naming collisions all over the place. But perhaps by adding a `.global` or `.auto` to a type file's name, exported types in those files could be safely auto-imported. It would certainly be a handy tool for those ubiquitous types that tend to sneak into many of your components.\r\n\r\nI'm sure there's pros and cons to this, so let's discuss 💬\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).",[3087,3088,3089],{"name":3019,"color":3020},{"name":3036,"color":3037},{"name":3090,"color":3091},"🍰 p2-nice-to-have","0E8A16",27719,"Types auto-import","2024-08-09T09:39:34Z","https://github.com/nuxt/nuxt/issues/27719",0.645155,{"description":3098,"labels":3099,"number":3112,"owner":3025,"repository":3113,"state":3046,"title":3114,"updated_at":3115,"url":3116,"score":3117},"## Description\n\nAccording to the @nuxt/ui documentation, composables like useToast and defineShortcuts should be auto-imported:\n\n> Use the auto-imported useToast composable to display [Toast](https://ui.nuxt.com/components/toast) notifications.\n> Use the auto-imported defineShortcuts composable to define keyboard shortcuts.\n\nHowever, in my Nuxt application, these composables are not being auto-imported as expected, resulting in a runtime error: useToast is not defined. Manually importing useToast leads to a Vite build error, and the only working solution I’ve found is a hack from a GitHub issue.\n\n## Step to reproduce\n\n`nuxt.config.ts`\n```ts\nimport tailwindcss from '@tailwindcss/vite'\n\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2025-05-15',\n css: ['~/assets/css/main.css'],\n devtools: { enabled: true },\n modules: ['@nuxt/eslint', '@nuxtjs/leaflet', '@pinia/nuxt', '@nuxt/ui'],\n vite: {\n plugins: [tailwindcss()],\n },\n})\n```\n\n`app.vue`\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UApp>\n\u003C/template>\n\n```\n\n`pages/index.vue`\n```vue\n\u003Cscript lang=\"ts\" setup>\nconst toast = useToast()\n\nfunction showToast() {\n toast.add({ title: 'Title' })\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"Show toast\" color=\"neutral\" variant=\"outline\" @click=\"showToast\" />\n \u003C/div>\n\u003C/template>\n```\n\n## Result\n\nWith the above \"configuration\", when running `npm run dev`, NUXT will display an 500 error page with message `useToast is not defined`.\n\nMy IDE suggests I should do a manual import with: `import { useToast } from '@nuxt/ui/runtime/composables/useToast.js';`. After I applied it, VITE failed to build the app with error message:\n\n\u003Cimg width=\"926\" height=\"388\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c7341745-32e3-4162-8e9d-099de951f784\" />\n\nIf builds only if I apply the suggestion from this issue: https://github.com/nuxt/ui/issues/3928#issuecomment-2870066906.\n\n## Questions\n1. Is that hack the optimal way to solve this problem?\n2. Are composables not being auto-imported an expected behaviour?",[3100,3103,3106,3109],{"name":3101,"color":3102},"question","d876e3",{"name":3104,"color":3105},"needs reproduction","CB47CF",{"name":3107,"color":3108},"v3","49DCB8",{"name":3110,"color":3111},"closed-by-bot","ededed",4495,"ui","Composables are not being auto-imported in NUXT 3","2025-07-18T02:16:37Z","https://github.com/nuxt/ui/issues/4495",0.6504756,{"labels":3119,"number":3125,"owner":3025,"repository":3025,"state":3046,"title":3126,"updated_at":3127,"url":3128,"score":3129},[3120,3121,3122],{"name":3019,"color":3020},{"name":3055,"color":3056},{"name":3123,"color":3124},"upstream","E8A36D",13862,"support composable auto import into `\u003Ctemplate>`","2023-01-19T17:08:43Z","https://github.com/nuxt/nuxt/issues/13862",0.65122664,{"description":3131,"labels":3132,"number":3135,"owner":3025,"repository":3025,"state":3046,"title":3136,"updated_at":3137,"url":3138,"score":3139},"- [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)",[3133,3134],{"name":3036,"color":3037},{"name":3055,"color":3056},11026,"Components Discovery","2023-01-19T14:46:30Z","https://github.com/nuxt/nuxt/issues/11026",0.65189564,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fV3WVe4zy9GtG4ALpfF03Uf-WHwDWqbgSEs0fOGuWg8A":-1},"/nuxt/nuxt/12858"]