如何在Nuxt 3中自动导入interface或type类型？

方法1：通过nuxt.config.ts配置类型自动导入 #

Nuxt 3默认不会自动识别纯类型导出的文件，需要在配置里显式指定类型文件，让框架处理全局导入：

1. 在nuxt.config.ts中添加typescript配置项，指定目标类型文件和具体类型：

export default defineNuxtConfig({
  typescript: {
    autoImport: {
      imports: [
        {
          from: './utils/useType', // 替换为你的类型文件实际路径
          imports: ['ImageDocument', 'InventoryDocument'],
          type: true // 标记为类型，告知Nuxt处理类型导入逻辑
        }
      ]
    }
  }
})

2. 重启Nuxt开发服务器，此时.vue文件中无需手动导入，即可直接使用这两个类型。

方法2：创建全局类型声明文件 #

如果不想逐个配置类型，可通过全局声明文件让TypeScript自动识别所有.vue文件中的类型：

1. 在项目根目录新建types文件夹，创建global.d.ts文件：

import type { ImageDocument, InventoryDocument } from '~/utils/useType'

declare global {
  type ImageDocument = ImageDocument
  type InventoryDocument = InventoryDocument
}

export {} // 确保文件被当作模块处理

2. 检查tsconfig.json是否包含类型目录（Nuxt默认已识别types文件夹，若未配置则手动添加）：

{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"]
  }
}

3. 重启开发服务器后，.vue文件即可直接使用目标类型。

注意事项 #

• 无论采用哪种方法，修改配置后必须重启Nuxt服务才能生效。
• 若将类型文件放在composables文件夹，Nuxt默认优先处理函数/变量导出，纯类型需通过type: true标记才能被自动导入识别。

内容的提问来源于stack exchange，提问作者werhw