Incomplete type indexing from #ui/types — component interfaces missing

[EvanSchleret]

Environment

• Operating System: Darwin
• Node Version: v22.14.0
• Nuxt Version: 3.16.2
• CLI Version: 3.12.0
• Nitro Version: 2.11.8
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, css, eslint, experimental, future, dayjs, imports, modules, vite, primevue, runtimeConfig, echo, sanctum, turnstile, compatibilityDate
• Runtime Modules: @nuxt/[email protected], @primevue/[email protected], @nuxt/[email protected], [email protected], [email protected], [email protected], @nuxtjs/[email protected], @vueuse/[email protected], @samk-dev/[email protected], [email protected], @vee-validate/[email protected], @nuxt/[email protected], [email protected], @nuxtjs/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.2

Reproduction

Description

Hey, this isn't exactly the same issue but it's somewhat related to #3186. I'm trying to wrap UInput in a custom component and want to expose all the props it uses. Here's what I tried:

<script setup lang="ts">
import type { InputProps } from '#ui/types'

const props = defineProps<InputProps>()
</script>

<template>
    <UInput
        v-bind="props"
        :ui="{ root: 'w-full' }"
    >
        <template
            v-for="(_, name) in $slots"
            #[name]="scope"
        >
            <slot
                :name
                v-bind="scope ?? {}"
            />
        </template>
    </UInput>
</template>

The issue is: I can access types exported from #ui/types/form, #ui/types/locale, and #ui/types/utils, but none of the component interfaces (like InputProps) are properly indexed or accessible through #ui/types.

Looks like an indexing/alias resolution issue in Nuxt or WebStorm — but maybe the structure of the exports from #ui/types could be improved to help this?

Any ideas or recommended workaround?

Many thanks

Additional context

No response

Logs

[benjamincanac]

You should import from @nuxt/ui not #ui/types, everything is exported there. We've only kept #ui/types for backwards compatibility.

[EvanSchleret]

Thanks a lot for the quick reply!

I just tried importing from @nuxt/ui directly, but unfortunately the InputProps type still isn’t found by the IDE. I'm using Nuxt UI Pro.

Could it be related to the fact that Nuxt UI Pro no longer requires installing the base Nuxt UI package? Maybe the typings from the standard @nuxt/ui aren't bundled or re-exported properly in Pro?

Let me know if there's something I might be missing.

Edit: I also tried installing @nuxt/ui explicitly, but that didn't solve the issue either. From what I can tell, all the export * from '../components/xxx.vue' inside the types aren’t properly picked up by the IDE.

[EvanSchleret]

After doing some more digging, I'm now fairly convinced the issue comes from the fact that the interfaces (like InputProps) are not properly exported because they live directly inside .vue files.

It seems like IDEs (like WebStorm) and even some tooling have trouble resolving types exported from Vue SFCs. These two discussions helped confirm that:

https://youtrack.jetbrains.com/issue/WEB-59992/Type-exports-from-Vue-SFC-setup-are-supported-now-by-vue-tsc-but-not-recognized-by-IDE
vuejs/language-tools#4607
Maybe extracting the prop types into dedicated .ts files and re-exporting them explicitly would improve DX and compatibility across environments?