如何在Nuxt插件中访问生成的类型？

方案一：扩展#app模块类型（推荐） #

这种方式贴合Nuxt官方类型扩展规范，无需额外导入就能在插件中直接使用生成的类型：

修改模块代码（module.ts） #

export default defineNuxtModule({
  meta: {
    // ...
  },
  defaults: {
    // ...
  },
  setup(_options, nuxt) {
    addTypeTemplate({
      filename: 'foo-types.d.ts',
      getContents: () => `
declare module '#app' {
  export type TypeForGeneric = Record<string, unknown>
}

export {}
`,
    })

    // addTypeTemplate会自动处理类型注册，无需手动添加references
    addPlugin(resolve('./runtime/plugin'))
  },
})

修改插件代码（runtime/plugin.ts） #

直接使用类型即可，无需额外导入：

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  const fooWithTypes = foo<TypeForGeneric>()

  return {
    provide: {
      fooWithTypes,
    },
  }
})

方案二：自定义类型别名 #

如果需要独立的类型导入路径，可以配置自定义别名：

修改模块代码（module.ts） #

import { resolve } from 'node:path'

export default defineNuxtModule({
  meta: {
    // ...
  },
  defaults: {
    // ...
  },
  setup(_options, nuxt) {
    const typeFilePath = resolve(nuxt.options.buildDir, 'types/foo-types.d.ts')

    addTypeTemplate({
      filename: 'foo-types.d.ts',
      getContents: () => `export type TypeForGeneric = Record<string, unknown>`,
    })

    // 添加自定义别名映射
    nuxt.options.alias['#foo-types'] = typeFilePath

    // 配置TypeScript路径识别
    nuxt.hook('prepare:types', async ({ tsConfig }) => {
      tsConfig.compilerOptions.paths['#foo-types'] = [typeFilePath]
    })
    
    addPlugin(resolve('./runtime/plugin'))
  },
})

修改插件代码（runtime/plugin.ts） #

通过自定义别名导入类型：

import { defineNuxtPlugin } from '#app'
import type { TypeForGeneric } from '#foo-types'

export default defineNuxtPlugin((nuxtApp) => {
  const fooWithTypes = foo<TypeForGeneric>()

  return {
    provide: {
      fooWithTypes,
    },
  }
})

关键说明 #

• addTypeTemplate会自动将生成的类型文件纳入Nuxt类型系统，无需手动在prepare:types的references中添加（特殊外部类型文件除外）。
• 方案一无需额外导入，类型全局关联#app模块，符合Nuxt生态习惯；方案二更适合需要独立管理类型的场景。

内容的提问来源于stack exchange，提问作者v.zdorovcev