N
Nuxt•4mo ago
Joni

Auto import types in v4

How does one auto import types from a custom types directory in v4? I accessed an older project which had v3, now im upgrading to v4 but its not importing my types anymore. i changed my tsconfig.json to this https://nuxt.com/docs/4.x/guide/directory-structure/tsconfig
Nuxt
tsconfig.json · Nuxt Directory Structure v4
Nuxt generates multiple TypeScript configuration files with sensible defaults and your aliases.
No description
4 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Joni. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt v4, auto-importing types from a custom types directory (such as types/ or shared/types/) is not enabled by default in the same way as composables or utils. Here’s what you need to know and do: 1. TypeScript Project References Nuxt v4 uses TypeScript project references for better type safety and IDE support. Your root tsconfig.json should look like this: 
{
  "files": [],
  "references": [
    { "path": "./.nuxt/tsconfig.app.json" },
    { "path": "./.nuxt/tsconfig.server.json" },
    { "path": "./.nuxt/tsconfig.shared.json" },
    { "path": "./.nuxt/tsconfig.node.json" }
  ]
}
{
  "files": [],
  "references": [
    { "path": "./.nuxt/tsconfig.app.json" },
    { "path": "./.nuxt/tsconfig.server.json" },
    { "path": "./.nuxt/tsconfig.shared.json" },
    { "path": "./.nuxt/tsconfig.node.json" }
  ]
}
This setup ensures that Nuxt-generated configs are used for type checking and auto-imports for composables, utils, and shared code, but it does not automatically make your custom types globally available Docs: tsconfig.json. 2. Making Types Globally Available To use your custom types (e.g., from types/ or shared/types/) without explicit imports, you need to declare them in the global namespace. For example, in types/my-types.d.ts: 
declare global {
  interface MyType {
    foo: string
  }
}

export {}
declare global {
  interface MyType {
    foo: string
  }
}

export {}
This approach allows you to use MyType anywhere in your project without importing it explicitly Stack Overflow: Auto type recognition. 3. Auto-imports for Shared Types Nuxt v4 introduces a shared/ directory for code (including types) that should be available in both app and server contexts. Only files in shared/types/ and shared/utils/ are auto-imported. However, for types, this means they are available for import, not automatically global. You still need to use the global declaration pattern above if you want to avoid explicit imports Docs: shared directory. 4. Do Not Overwrite Paths in tsconfig If you overwrite compilerOptions.paths in your tsconfig.json, you may break Nuxt’s auto-imports and alias resolution. Always use the alias property in nuxt.config for custom aliases Docs: TypeScript concepts. --- Summary:
- Use global type declarations in your .d.ts files to avoid explicit imports. - Ensure your tsconfig.json uses project references as shown above. - Do not overwrite compilerOptions.paths directly. - Only files in shared/types/ and shared/utils/ are auto-imported for use, but types still need to be declared globally for true auto-availability. If you follow these steps, your types should be recognized throughout your Nuxt v4 project without manual imports. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@218732783902654465> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Joni
JoniOP•4mo ago
Thats the first time a bot actually helped even tho i came across all these informations before. The key is to store custom type files at shared/types/*.ts
No description
Sna4x8
Sna4x8•4mo ago
I had this same issue. For posterity, here is another solution. Add an imports->dir to the Nuxt config, like so: 
import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  imports: {
    dirs: [
      'types/*.ts',
    ],
  },
})
import { defineNuxtConfig } from 'nuxt/config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  imports: {
    dirs: [
      'types/*.ts',
    ],
  },
})
The directory (types here) is relative to srcDir, which, by default, is app/. Add type definition files in src/app/types/. For what it's worth, in Nuxt 3 srcDir was src/ instead of /src/app/. If one had types in src/types/ in Nuxt 3, the fix would be to simply move src/types to src/app/types. This unfortunately is not in the upgrade guide.

Did you find this page helpful?