Auto-imports

Nuxt Kit 提供了一系列工具，帮助你处理自动导入。这些函数允许你注册自己的 utils、composables 和 Vue API。

Nuxt 会自动导入辅助函数、composables 和 Vue API，让你在整个应用中无需显式导入即可使用它们。基于目录结构，每个 Nuxt 应用也可以使用自己 composables 和插件的自动导入。

借助 Nuxt Kit，你还可以添加自己的自动导入。addImports 和 addImportsDir 允许你向 Nuxt 应用添加导入。addImportsSources 允许你向 Nuxt 应用添加来自第三方包的已列出导入。

这些工具由 unimport 驱动，它提供了 Nuxt 内部使用的底层自动导入机制。

这些函数用于注册你自己的 utils、composables 和 Vue API。对于页面、组件和插件，请参阅特定小节：Pages、Components、Plugins。 :

观看 Vue School 关于 Auto-imports Nuxt Kit 工具的视频。 :

`addImports`

向 Nuxt 应用添加导入。它让你的导入在 Nuxt 应用上下文中可用，而无需手动导入它们。

要添加 Nitro 服务端上下文的导入，请参考 addServerImports 函数。 :

用法

import { addImports, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const names = [
      'useStoryblok',
      'useStoryblokApi',
      'useStoryblokBridge',
      'renderRichText',
      'RichTextSchema',
    ]

    names.forEach(name =>
      addImports({ name, as: name, from: '@storyblok/vue' }),
    )
  },
})

类型

function addImports (imports: Import | Import[]): void

参数

imports：一个对象或一组对象，包含以下属性：

属性	类型	必填	描述
`name`	`string`	`true`	要被检测的导入名。
`from`	`string`	`true`	要从中导入的模块说明符。
`priority`	`number`	`false`	导入的优先级；如果多个导入同名，会使用该优先级最高的那一个。
`disabled`	`boolean`	`false`	该导入是否被禁用。
`meta`	`Record<string, any>`	`false`	导入的元数据。
`type`	`boolean`	`false`	该导入是否为纯类型导入。
`typeFrom`	`string`	`false`	生成类型声明时用作 `from` 值。
`as`	`string`	`false`	以该名称导入。

`addImportsDir`

向 Nuxt 应用添加一个目录中的导入。它会自动导入该目录中的所有文件，并使它们无需手动导入即可在 Nuxt 应用中使用。

用法

import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@vueuse/motion',
    configKey: 'motion',
  },
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('./runtime/composables'))
  },
})

类型

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

参数

属性	类型	必填	描述
`dirs`	`string \| string[]`	`true`	一个字符串或一组字符串，表示要导入的目录路径。
`options`	`{ prepend?: boolean }`	`false`	传给导入的选项。如果 `prepend` 设为 `true`，导入会被加到导入列表的开头。

`addImportsSources`

向 Nuxt 应用添加已列出的导入。

用法

import { addImportsSources, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addImportsSources([
      { package: '@vueuse/core' },
      {
        from: 'h3',
        imports: [
          'defineEventHandler',
          'getQuery',
          'getRouterParams',
          'readBody',
          'sendRedirect',
        ],
      },
    ])
  },
})

类型

function addImportsSources (importSources: Preset | Preset[]): void

参数

importSources：一个对象或一组对象，包含以下属性：

InlinePreset

属性	类型	必填	描述
`from`	`string`	`true`	要从中导入的模块说明符。
`imports`	`PresetImport \| ImportSource[]`	`true`	一个对象或一组对象，可以是导入名、导入对象或导入源。

PackagePreset

属性	类型	必填	描述
`package`	`string`	`true`	包的名称。