Nuxt•12mo ago

Typescript error importing vue components in .ts files

Hey, I am having this error in .ts files in a new Nuxt3 project.
Don't have any custom setting in tsconfig.

kapa.ai•1/14/25, 3:46 PM

Hi @JuanMCe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•1/14/25, 3:46 PM

----------------------
Based on the information provided in the knowledge sources, it appears that you're encountering a TypeScript error when importing Vue components in .ts files in a Nuxt 3 project. This issue is likely related to the limitations of the

app.config.ts

app.config.ts

file and how it interacts with Nitro, Nuxt's server engine.

According to the Nuxt documentation on app.config.ts limitations, as of Nuxt v3.3, there are some known limitations:

You cannot import Vue components directly in
```
app.config.ts
```
```
app.config.ts
```
.
Some auto-imports are not available in the Nitro context.

These limitations occur because Nitro processes the app config without full Vue component support.

To resolve this issue, you have a few options:

Ensure that you're not trying to import Vue components directly in .ts files that are processed by Nitro, such as
```
app.config.ts
```
```
app.config.ts
```
or server-side files.
If you need to use Vue components in TypeScript files, consider moving that logic to .vue files where possible, as Nuxt's auto-imports work better with Vue components.
You can use explicit imports from the #components#components alias for Vue components in your .ts files. For example:

   import { MyComponent } from '#components'

   import { MyComponent } from '#components'

If you're working on server-side TypeScript files, you might want to add a ~/server/tsconfig.json~/server/tsconfig.json file to improve type hints in your IDE, as mentioned in the Server Types documentation:

   {
     "extends": "../.nuxt/tsconfig.server.json"
   }

   {
     "extends": "../.nuxt/tsconfig.server.json"
   }

Note that this won't affect type checking when running nuxi typechecknuxi typecheck, but it should improve IDE type hints.

kapa.ai•1/14/25, 3:46 PM

Make sure you have the latest version of vue-tscvue-tsc installed, as there have been issues with certain versions not working correctly with Nuxt 3, as mentioned in this GitHub pull request.

If none of these solutions resolve your issue, you may need to provide more specific details about the error you're encountering and the exact context in which it occurs.

Citations:
Known Limitations
Server Types
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/14/25, 3:46 PM

@281911171919904778 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Typescript error importing vue components in .ts files

Similar Threads

Similar Threads

Similar Threads