\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).",[1984,1987],{"name":1985,"color":1986},"enhancement","8DEF37",{"name":1988,"color":1989},"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.6902763,{"description":1998,"labels":1999,"number":2004,"owner":1991,"repository":1991,"state":1992,"title":2005,"updated_at":2006,"url":2007,"score":2008},"### 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).",[2000,2001],{"name":1985,"color":1986},{"name":2002,"color":2003},"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.69167507,{"description":2010,"labels":2011,"number":2015,"owner":1991,"repository":1991,"state":2016,"title":2017,"updated_at":2018,"url":2019,"score":2020},"I am using Nuxt with Typescript. I create a following component:\r\n\r\n \u003Ctemplate>\r\n \u003Cdiv class=\"field\">\r\n \u003Clabel class=\"label\" v-if=\"typeof label !== 'undefined'\">{{ label }}\u003C/label>\r\n \u003Cdiv class=\"control\">\r\n \u003Ctextarea\r\n v-if=\"inputType === 'textarea'\"\r\n class=\"textarea\"\r\n @input=\"$emit('input', $event.target.value)\"\r\n >\u003C/textarea>\r\n \u003Cinput\r\n v-if=\"inputType === 'input'\"\r\n :type=\"type\"\r\n class=\"input\"\r\n @input=\"$emit('input', $event.target.value)\"\r\n >\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/template>\r\n \r\n \u003Cscript lang=\"ts\">\r\n import { Vue, Component, Prop } from \"vue-property-decorator\"\r\n \r\n @Component({})\r\n export default class AppInput extends Vue {\r\n @Prop({ type: String, required: false, default: \"input\" })\r\n inputType!: string\r\n \r\n @Prop({ type: String, required: false })\r\n label!: string\r\n \r\n @Prop({ type: String, required: false, default: \"text\" })\r\n type!: string\r\n }\r\n \u003C/script>\r\n \r\n \u003Cstyle>\r\n \u003C/style>\r\n\r\nAnd then in `@/plugins/components.ts`, I import the component as following:\r\n\r\n import Vue from \"vue\"\r\n import AppInput from \"@/components/Forms/AppInput.vue\"\r\n \r\n Vue.component(\"AppInput\", AppInput)\r\n\r\nWhen I compile the project with Nuxt, it throws me `export 'default' (imported as 'mod') was not found` error. Please help!\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9028\">#c9028\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2012],{"name":2013,"color":2014},"2.x","d4c5f9",5508,"closed","Nuxt export 'default' (imported as 'mod') was not found","2023-01-18T20:12:55Z","https://github.com/nuxt/nuxt/issues/5508",0.6560183,{"labels":2022,"number":2025,"owner":1991,"repository":1991,"state":2016,"title":2026,"updated_at":2027,"url":2028,"score":2029},[2023,2024],{"name":1985,"color":1986},{"name":2013,"color":2014},6517,"Add example on how to use with @vue/composition-api","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6517",0.6697526,{"labels":2031,"number":2034,"owner":1991,"repository":1991,"state":2016,"title":2035,"updated_at":2036,"url":2037,"score":2038},[2032,2033],{"name":1985,"color":1986},{"name":2013,"color":2014},8227,"Can we export nuxt project as web components ?","2023-02-14T11:31:45Z","https://github.com/nuxt/nuxt/issues/8227",0.6711393,{"description":2040,"labels":2041,"number":2051,"owner":1991,"repository":1991,"state":2016,"title":2052,"updated_at":2053,"url":2054,"score":2055},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.18.1`\r\n- Nuxt Version: `3.3.2`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/niklv/nuxt-component-props-def-bug\n\n### Describe the bug\n\nFor my project config typing I need to refer to typing of component props.\r\nI try extract props typing in this way. But looks like there are no props typing at all.\r\n```vue\r\n\u003Cscript lang=\"ts\" setup>\r\n// ComponentA.vue\r\nconst {propA} = defineProps\u003C{\r\n propA: string\r\n}>()\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv v-text=\"propA\" />\r\n\u003C/template>\r\n\r\n```\r\n\r\n```ts\r\n// config.ts\r\nimport type {ComponentA} from \"#components\";\r\nimport {ComponentOptionsBase} from \"@vue/runtime-core\";\r\n\r\n\r\ntype ComponentProps\u003CT> = T extends ComponentOptionsBase\u003Cinfer P, // Props\r\n any, // RawBindings\r\n any, // D\r\n any, // C\r\n any, // M\r\n any, // Mixin\r\n any, // Extends\r\n any> ? unknown extends P ? {} : P : {};\r\n\r\n\r\ntype CompAProps = ComponentProps\u003Ctypeof ComponentA>\r\n\r\n\r\nconst someConfig:CompAProps = {\r\n // @ts-expect-error\r\n notExistedProp: true // should be error\r\n}\r\n```\n\n### Additional context\n\n\r\n\r\nThere are must be some props typing in first generic argument of `DefineComponent`\n\n### Logs\n\n_No response_",[2042,2045,2048],{"name":2043,"color":2044},"types","2875C3",{"name":2046,"color":2047},"3.x","29bc7f",{"name":2049,"color":2050},"upstream","E8A36D",20010,"Empty global components props typings","2023-10-22T09:01:34Z","https://github.com/nuxt/nuxt/issues/20010",0.6754078,{"description":2057,"labels":2058,"number":2061,"owner":1991,"repository":1991,"state":2016,"title":2062,"updated_at":2027,"url":2063,"score":2064},"### What problem does this feature solve?\n\nI'm trying to find a way to read `props` from every .vue component in the project and write the result to a JSON file.\n\nIt should happen server side so I've tried creating a custom nuxt command and a module. The problem with these is I can't actually import a component, it's just a syntax error because components are not just JS. Even after a `nuxt build` when the components are reduced to being just JS in the `.nuxt` folder I still couldn't figure out how to read the props from that mess. I spent a few days on google, reading other modules, nuxt documentation and source code but couldn't find a way to extract details about components.\n\nWhat does work is a plugin in server only mode. I can read and write files, import components, read the props. Basically everything I wanted. But now the issue is that it's a plugin and that's not what plugins are for. This script should only run once during build but a plugin will run on every page load.\n\nSo I'd like to see a generally good way of messing with components from a command line script.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9773\">#c9773\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2059,2060],{"name":1985,"color":1986},{"name":2013,"color":2014},6411,"Using components in modules","https://github.com/nuxt/nuxt/issues/6411",0.67724156,{"description":2066,"labels":2067,"number":2072,"owner":1991,"repository":1991,"state":2016,"title":2073,"updated_at":2074,"url":2075,"score":2076},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v18.14.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n**VsCode 1.79.2**\r\n- vscode.typescript-language-features: disabled\r\n- Vue.volar: 1.8.3, enabled\r\n- Vue.vscode-typescript-vue-plugin: 1.8.3, enabled\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/niklas-may/nuxt-module-issue-reproduction\r\n\r\n### Describe the bug\r\n\r\n**Preface**\r\n_Thank you for your amazing work on Nuxt! I am not sure where this issue is best raised, Nuxt, VsCode or Vue. But due to the special typescript tooling with auto imports, I thought it's best to start here, and would be happy to hear if anybody observed a similar behaviour or has a solution._ \r\n\r\n**Description**\r\nWhen I open `~/.nuxt/components.d.ts` in VsCode and hover over an imported component, VsCode IntelliSense popover displays the correct types for this component.\r\nBut when I use the component in any other components template block, for example `~/app.vue`, the typing is missing the prop types.\r\n\r\n### Component and Type Definitions\r\n\r\n`~/../src/runtime/MyButton.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv style=\"border: 1px solid pink\">\r\n \u003Cslot />\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nwithDefaults(\r\n defineProps\u003C{\r\n variant: \"fill\" | \"ghost\";\r\n }>(),\r\n { variant: \"fill\" }\r\n);\r\n\u003C/script>\r\n```\r\n\r\n`~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\ndeclare module 'vue' {\r\n export interface GlobalComponents {\r\n //...\r\n 'MyButton': typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n //...\r\n }\r\n}\r\n\r\nexport const MyButton: typeof import(\"../../src/runtime/components/MyButton.vue\")['default']\r\n\r\nexport const componentNames: string[]\r\n```\r\n\r\n\r\n### Correct Intellisense\r\n\r\nVsCode popopver hovering `'MyButton'` in `~/.nuxt/components.d.ts`\r\n\r\n```TypeScript\r\n(property) GlobalComponents['MyButton']: __VLS_WithTemplateSlots\u003CDefineComponent\u003C{\r\n variant: {\r\n type: PropType\u003C\"fill\" | \"ghost\">;\r\n required: true;\r\n default: string;\r\n };\r\n}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>, {\r\n ...;\r\n}>\r\n````\r\n\r\n### Wrong Intellisense\r\n\r\nVsCode popopver hovering `\u003CMyButton />` in the template block of `~/app.vue` (or any other template)\r\n\r\n```TypeScript\r\n(property) 'MyButton': DefineComponent\u003C{}, {}, any>\r\n```\r\n\r\n### Additional context\r\n\r\nThe above example is the current state of the reproduction repo. But a different, but similar behavior happened in other reports (for example a yarn workspace repo). Strange enough, sometimes, it works fine...\r\n\r\n### Logs\r\n\r\n_No response_",[2068,2069,2070,2071],{"name":2043,"color":2044},{"name":2046,"color":2047},{"name":1988,"color":1989},{"name":2049,"color":2050},21933,"Component appears to be untyped in template block","2023-12-12T14:36:22Z","https://github.com/nuxt/nuxt/issues/21933",0.679612,{"labels":2078,"number":2081,"owner":1991,"repository":1991,"state":2016,"title":2082,"updated_at":2083,"url":2084,"score":2085},[2079,2080],{"name":1985,"color":1986},{"name":2046,"color":2047},12962,"Type Support for Global Components (e.g. `\u003Cnuxt-link>`)","2023-01-19T16:39:56Z","https://github.com/nuxt/nuxt/issues/12962",0.6819928,{"description":2087,"labels":2088,"number":2090,"owner":1991,"repository":1991,"state":2016,"title":2091,"updated_at":2092,"url":2093,"score":2094},"In every component or page we create we end up having tons of `import \"components/component/SomeComponent.vue\"` states for basic elements like regions, layouts, grids & columns. Is there a way in nuxt to define those components globally so they are known in subcomponents? Something like `import \"components/frame/Frame.vue\"` that contains the imports for regions, layouts, grids & columns. \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/c363\">#c363\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2089],{"name":2013,"color":2014},421,"Define global components","2023-01-18T22:17:23Z","https://github.com/nuxt/nuxt/issues/421",0.68259674,["Reactive",2096],{},["Set"],["ShallowReactive",2099],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"rRNtS4HsMErgJTz8YgfpvvjQ22DJr2i43smy9y6DD70":-1},"/nuxt/ui/2891"]