Importing type from other component
I thought I could be able to import types using the
#components alias but it doesn't seem to work for me.
Currently I'm importing types from other components using this:
Is that correct? I thought I should be able to use
but it doesn't seem to work here, although I do have
in my tsconfig.json and
is listed in from .nuxt/tsconfig.json2 Replies
Hi @Cheaterman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You are correct that Nuxt provides the
- Importing types from SFCs using
#components alias for importing components directly, and this works for importing the component itself (for example, for use in templates or scripts). For example:
However, the knowledge sources do not mention support for importing TypeScript types directly from single-file components (SFCs) via the #components alias. The #components alias is designed for importing the component instances themselves, not for accessing types defined within those SFCs. This is consistent with how Nuxt auto-generates the type declarations for components, but not for their internal types.
Your current approach:
is the standard way in Vue/Nuxt projects to import types from another SFC, as long as your tooling (Vite, Volar, etc.) supports type extraction from SFCs. The #components alias is not documented as supporting type imports from SFCs in the official Nuxt documentation.
In summary:- Importing types from SFCs using
@/components/Component.vue is correct.
- The #components alias is for importing component instances, not types defined within SFCs.
- There is no documentation indicating that importing types via #components/Component.vue is supported or should work Direct Imports.
If you need to share types between components, consider extracting them into a separate .ts file (e.g., types.ts) and importing from there, which is a common practice in Nuxt and Vue projects.
If you are experiencing issues with type imports from SFCs, it may be related to your IDE or TypeScript tooling, not Nuxt's alias system.
Let me know if you need more details!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@534768504943935500> Kapa.ai is still learning and improving, please let me know how I did by reacting below.