\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[3139],{"name":3140,"color":3141},"enhancement","a2eeef",2891,"nuxt","ui","closed","Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.67844886,{"description":3151,"labels":3152,"number":3168,"owner":3143,"repository":3143,"state":3145,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Environment\n\nStackblitz\r\n\r\n````\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: extends\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n````\n\n### Reproduction\n\nhttps://stackblitz.com/github/martinszeltins/found-nuxt-components-issue?file=app.vue\n\n### Describe the bug\n\nWhen I add this module to my modules array in nuxt.config.ts then I lose all typings for my components _(for both local and 3rd party components)._ It shows that components have type of `unknown`. Before I add this module, everything works.\r\n\r\n**nuxt.config.ts** 👇️\r\n```diff\r\nmodules: [\r\n+ '@nuxtjs/i18n', // This breaks all auto-import component typings (components not recognized anymore)\r\n '@vueuse/nuxt',\r\n 'nuxt-primevue'\r\n],\r\n```\r\n\r\nIf I remove it from my modules array then everything works again.\r\n\r\n**Screenshot before adding the module (everything works):** 👍️ 👇️\r\n\r\n\r\n\r\n**Screenshot after adding the module (type unknown):** ❌ 👇️\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3153,3156,3159,3162,3165],{"name":3154,"color":3155},"types","2875C3",{"name":3157,"color":3158},"3.x","29bc7f",{"name":3160,"color":3161},"workaround available","11376d",{"name":3163,"color":3164},"bug","d73a4a",{"name":3166,"color":3167},"upstream","E8A36D",26214,"Adding `@nuxtjs/i18n` to Nuxt breaks component types (shows unknown)","2024-05-27T10:28:40Z","https://github.com/nuxt/nuxt/issues/26214",0.69375575,{"description":3174,"labels":3175,"number":3177,"owner":3143,"repository":3144,"state":3145,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### For what version of Nuxt UI are you suggesting this?\n\nv2\n\n### Description\n\nPlease export `UTable` types in '#ui/types' too (Rows/Columns types).\nThanks\n\n### Additional context\n\n_No response_",[3176],{"name":3140,"color":3141},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.6985745,{"description":3183,"labels":3184,"number":3188,"owner":3143,"repository":3143,"state":3145,"title":3189,"updated_at":3190,"url":3191,"score":3192},"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>",[3185],{"name":3186,"color":3187},"2.x","d4c5f9",5508,"Nuxt export 'default' (imported as 'mod') was not found","2023-01-18T20:12:55Z","https://github.com/nuxt/nuxt/issues/5508",0.70159185,{"description":3194,"labels":3195,"number":3202,"owner":3143,"repository":3143,"state":3145,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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_",[3196,3197,3198,3201],{"name":3154,"color":3155},{"name":3157,"color":3158},{"name":3199,"color":3200},"pending triage","E99695",{"name":3166,"color":3167},21933,"Component appears to be untyped in template block","2023-12-12T14:36:22Z","https://github.com/nuxt/nuxt/issues/21933",0.7025561,{"description":3208,"labels":3209,"number":3217,"owner":3143,"repository":3144,"state":3145,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: -\n- CLI Version: 3.28.0\n- Nitro Version: -\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n4.0.1\n\n### Reproduction\n\nhttps://github.com/awais019/nuxt-ui-extend-bug\n\n### Description\n\nI am trying to create a custom type for my generic Form component. But when I try to use it in defineProps. It gives me this error.\n\n```\n[@vue/compiler-sfc] Failed to resolve extends base type.\n If this previously worked in 3.2, you can instruct the compiler \nto ignore this extend by adding /* @vue-ignore */ \nbefore it, for example: interface Props extends /* @vue-ignore \n*/ Base {} Note: both in 3.2 or with the ignore, the properties in \nthe base type are treated as fallthrough attrs \n14 | \u003Ctemplate> 15 | \u003Cdiv>Form\u003C/div> 16 | \u003C/template> | ^ 17 |\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3210,3211,3214],{"name":3163,"color":3164},{"name":3212,"color":3213},"v3","49DCB8",{"name":3215,"color":3216},"triage","ffffff",4699,"Not able to extend `FormProps`.","2025-08-11T10:24:22Z","https://github.com/nuxt/ui/issues/4699",0.7057636,{"description":3223,"labels":3224,"number":3232,"owner":3143,"repository":3143,"state":3145,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.17.1`\r\n- Nuxt Version: `3.8.2`\r\n- CLI Version: `3.10.0`\r\n- Nitro Version: `2.8.0`\r\n- Package Manager: `npm@9.6.7`\r\n- Builder: `-`\r\n- User Config: `devtools`, `imports`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n1. go to https://github.com/DawidKopys/nuxt-props-with-global-types/ and clone this repo\r\n2. `npm i`\r\n3. `npm run type-check`\r\n\r\n**Expected result**: we get typescript error in App.vue in place of using CompUsingGlobalType1 as we are passing number instead of string to its prop foo.bar.\r\n\r\n**Actual result**: there is no typescript error in above place.\r\n\r\n### Describe the bug\r\n\r\nFirst of all, let me thank all of the people involved in developing Nuxt. You are doing a great job creating this awesome piece of software!\r\n\r\nNow back to the issue:\r\nIt seems that types auto imported by Nuxt can't be used for defining components' props (without importing them explicitly, for example from `#imports`). In fact it's even worse - they can be used, we don't get any ts errors, it just doesn't seem to work. It looks that it fails silently.\r\n\r\nWhat is more, it also presents that globally available types can be used for defining props, just not if they are made available globally the way it is currently done in Nuxt.\r\n\r\nTo keep it brief:\r\n- global types added to the global scope in the way Nuxt does that don't work when used for defining vue components' props. It seems that Nuxt is generating something alike below snippet inside `.nuxt/types/imports.d.ts`\r\n```typescript\r\ndeclare global {\r\n // @ts-ignore\r\n export type { GlobalExternalType1 } from './GlobalExternalType1'\r\n}\r\n\r\n```\r\n- it seems that it could work, if Nuxt was generating something like below instead:\r\n```typescript\r\ndeclare global {\r\n interface GlobalExternalType2 {\r\n bar: string\r\n }\r\n}\r\n```\r\nIt would possibly require to copy over entire types' declarations in order to do that. But maybe it wouldn't be a problem since TypeScript is a structural type system and when comparing types, TypeScript only takes into account the members on the type.\r\n\r\n\r\n### Additional context\r\n\r\nFor additional info see https://github.com/DawidKopys/vue-props-with-global-types#readme as well. The same issue but with plain vue project, without Nuxt.\r\n\r\n### Logs\r\n\r\n_No response_",[3225,3227,3228,3229],{"name":3140,"color":3226},"8DEF37",{"name":3157,"color":3158},{"name":3163,"color":3164},{"name":3230,"color":3231},"🍰 p2-nice-to-have","0E8A16",24412,"Types auto imported by Nuxt can't be used for defining components' props","2024-03-28T19:37:47Z","https://github.com/nuxt/nuxt/issues/24412",0.70661837,{"description":3238,"labels":3239,"number":3246,"owner":3143,"repository":3144,"state":3145,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.3\n- Nitro Version: -\n- Package Manager: pnpm@10.5.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, ui, runtimeConfig\n- Runtime Modules: @nuxt/ui-pro@3.0.0-beta.2, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read d\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/relaxed-scooby-nv4zrp?file=%2Fapp%2Fpages%2Findex.vue%3A7%2C51\n\n### Description\n\nI was importing type `FormSubmitEvent` from Nuxt UI but when I shifted to nuxt ui pro and replaced the import. But it broke, because nuxt ui pro doesn't export this type\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3240,3241,3242,3245],{"name":3163,"color":3164},{"name":3212,"color":3213},{"name":3243,"color":3244},"nuxt/ui-pro","00dc82",{"name":3215,"color":3216},3465,"type `FormSubmitEvent` not working in nuxt ui pro version 3","2025-05-10T17:33:04Z","https://github.com/nuxt/ui/issues/3465",0.70861286,{"description":3252,"labels":3253,"number":3258,"owner":3143,"repository":3143,"state":3145,"title":3259,"updated_at":3260,"url":3261,"score":3262},"I'm getting a similar error:\r\n\r\n `Property X does not exist on type 'CreateComponentPublicInstance\u003CReadonly\u003CExtractPropTypes\u003C{}>>, { Menu: typeof Menu; MenuButton: typeof MenuButton; MenuItem: typeof MenuItem; MenuItems: typeof MenuItems; Popover: typeof Popover; ... 10 more ...; handleLinkClick: typeof handleLinkClick; }, ... 17 more ..., {}>'.ts-plugin(2339)`\r\n\r\nWhere `X` is any function or variable in the utils folder. The app works fine on live and dev mode so nuxt is auto-importing correctly, but I think vscode's \"Vue - Official\" extension isn't understanding that this is auto-imported.\r\n\r\nThis only happens in the `\u003Ctemplate>` section, it doesn't error inside `\u003Cscript>`.\r\n\r\nThe error wasn't here when I had Nuxt 3.11.2, but I recently upgraded to 3.12.4 and it showed up. Is this happening for anyone else?\r\n\r\n_Originally posted by @jeffreytung7 in https://github.com/nuxt/nuxt/issues/28373#issuecomment-2272179792_",[3254,3255],{"name":3199,"color":3200},{"name":3256,"color":3257},"needs reproduction","FBCA04",28707,"Property X does not exist on type 'CreateComponentPublicInstance\u003CReadonly\u003CExtractPropTypes\u003C{}>>","2025-02-19T14:13:18Z","https://github.com/nuxt/nuxt/issues/28707",0.7097871,{"description":3264,"labels":3265,"number":3275,"owner":3143,"repository":3144,"state":3145,"title":3276,"updated_at":3277,"url":3278,"score":3279},"### Environment\n\n- Operating System - Ubuntu 22\n- Node Version: 22\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Package Manager: pnpm@10.9.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\n```javascript\nconst fields = ref([\n {\n name: 'code',\n type: 'otp',\n placeholder: 'Enter 6-digit code',\n otp: {\n length: 6,\n placeholder: '●',\n },\n },\n])\n\nconst submitButtonOptions = computed(() => ({\n label: 'Verify Code',\n loading: loading.value,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex min-h-screen items-center justify-center p-4\">\n \u003CUPageCard class=\"w-full max-w-md\">\n \u003CUAuthForm\n :schema=\"schema\"\n :state=\"credentials\"\n :fields=\"fields\"\n :loading=\"loading\"\n title=\"Multi-Factor Authentication\"\n subtitle=\"Enter the 6-digit code from your authenticator app to continue.\"\n :submit=\"submitButtonOptions\"\n @submit=\"verifyMFA\"\n >\n \u003Ctemplate #header>\n \u003CNuxtImg\n src=\"/thinkrocket-logo.png\"\n alt=\"ThinkRocket Logo\"\n width=\"100\"\n class=\"mx-auto\"\n preset=\"contain\"\n />\n \u003C/template>\n\n \u003Ctemplate #validation>\n \u003CUAlert\n v-if=\"mfaError\"\n color=\"error\"\n icon=\"i-lucide-alert-circle\"\n :title=\"mfaError\"\n class=\"mb-4\"\n />\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003Cdiv class=\"text-center space-y-2\">\n \u003Cp class=\"text-sm text-gray-600 dark:text-gray-300\">\n Check your authenticator app for the current code.\n \u003C/p>\n \u003CUButton variant=\"ghost\" size=\"sm\" :loading=\"loading\" @click=\"refreshChallenge\">\n \u003CUIcon name=\"i-lucide-refresh-cw\" class=\"h-4 w-4 mr-1\" />\n Get New Code\n \u003C/UButton>\n \u003C/div>\n \u003C/template>\n \u003C/UAuthForm>\n \u003C/UPageCard>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\n`:fields` is throwing typescript error. Only an issue with `otp`. Looking in\n\n- `node_modules/.pnpm/@nuxt+ui-pro@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carouse_48b559106e80aa1b3007fc5d3af2ab7f/node_modules/@nuxt/ui-pro/dist/runtime/components/AuthForm.vue.d.ts`\n- `node_modules/.pnpm/@nuxt+ui@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carousel@8._6f36fdd0332a5dab432a961d27814af8/node_modules/@nuxt/ui/dist/runtime/components/PinInput.vue.d.ts`\n- `node_modules/.pnpm/reka-ui@2.3.1_typescript@5.8.3_vue@3.5.16_typescript@5.8.3_/node_modules/reka-ui/dist/index.d.ts`\n \nI'm not seeing what I'm missing. The [docs](https://ui.nuxt.com/components/auth-form#props) don't give any other details than the example.\n\n```\nVue: Type\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}[]\nis not assignable to type AuthFormField[]\nType\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}\nis not assignable to type AuthFormField\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3266,3267,3269,3270,3271,3272],{"name":3163,"color":3164},{"name":3256,"color":3268},"CB47CF",{"name":3212,"color":3213},{"name":3243,"color":3244},{"name":3215,"color":3216},{"name":3273,"color":3274},"closed-by-bot","ededed",4317,"UAuthForm otp typescript error","2025-06-18T02:14:57Z","https://github.com/nuxt/ui/issues/4317",0.71022457,["Reactive",3281],{},["Set"],["ShallowReactive",3284],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fMKcWEpzAKLtFHhTfPY60u64CgU2Rih64srxiYZRTKeM":-1},"/nuxt/ui/4797"]