Error when importing "#ui/types"

[hotdogc1017]

Environment

• Operating System: Darwin
• Node Version: v19.0.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: -
• Package Manager: pnpm@8.6.10
• Builder: -
• User Config: devtools, modules, ui
• Runtime Modules: @nuxt/ui@2.17.0, @nuxt/eslint@0.3.13
• Build Modules: -

Version

v2.17.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-wvzth7?file=app.vue

Description

I want to get the type of a component option, using #ui/types as described in the docs

import {} form "#ui/types"

When I run pnpm dev I get the error:

Failed to resolve import "#ui/types" from "app.vue". Does the file exist?

Additional context

No response

Logs

No response

[metkm]

if you are importing types you need to add type before, so this should work

import type { BreadcrumbLink } from '#ui/types'

// or
// import { type BreadcrumbLink, type SomeOtherType } from '#ui/types'
// or everything you import is a type
// import type { BreadcrumbLink, SomeOtherType } from '#ui/types'

[hotdogc1017]

if you are importing types you need to add type before, so this should work如果你正在导入类型，你需要在前面添加 type ，这样应该可以正常工作

import type { BreadcrumbLink } from '#ui/types'

// or
// import { type BreadcrumbLink, type SomeOtherType } from '#ui/types'
// or everything you import is a type
// import type { BreadcrumbLink, SomeOtherType } from '#ui/types'

Thanks for your reply. I imported it like this at first:

import { type DropdownItem } from "#ui/types/dropdown"

But the same error still occurred:

Failed to resolve import "#ui/types/dropdown" from "app.vue". Does the file exist?

When I changed it to:

import type { DropDownItem } from '#ui/types/dropdown';

The error disappeared and everything worked fine. Because I have always mixed types when importing before and never had any problems. For example, in Vue3, mixed imports work fine:

import { ref, type Ref } from 'vue';

Or

import { type ComputedRef } from 'vue';

I have provided a minimal implementation https://play.vuejs.org/#eNp9kU9PwzAMxb+KyaUgjVUITqObBGgScAA0kLjkUrVul5EmUf6MoarfHSfTxg5jt/i95/hnuWd3xozXAdmEFa6ywnhw6IMBWap2ypl3nM24Ep3R1kMPFpsR+B+DsMAGBmis7iCjD7Lbg1QKPOjOBI/1kWCllfPQuRam8cfz7BGl1PCprazPsguuinwLQ6Op8NgZW XqkCqBYXs36PjUPQ5FTlVShaBisLztdoyRw8jmDnMwiP+hnI1qJxjeiHa+cVrR3H/s5qwhXSLSvxgvC42wCyYleSXTfz0nzNuBop1dLrL6O6Cu3iRpnbxYd2jVytvd8aVv0W3v+/oIbeu9Nog+S0ifMBTotQ2Tcxu6Dqgn7IJdon9IthGo/3HzjUbndUhE0JoeU54xOEi/13+p/uNfjm9TH1cCGXym4vJ0= Can someone explain this? Thanks a lot🥹

[benjamincanac]

This is normal, you can't use import { type ... } from '#ui/types' as it's only an alias to types unlike importing from vue.