---
title: "自动导入"
description: "Nuxt Kit 提供了一组实用工具，帮助你使用自动导入。这些函数允许你注册自己的工具函数、组合函数和 Vue API。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/api/kit/autoimports"
---
# 自动导入

> Nuxt Kit 提供了一组实用工具，帮助你使用自动导入。这些函数允许你注册自己的工具函数、组合函数和 Vue API。

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

使用 Nuxt Kit 你还可以添加自己的自动导入。`addImports` 和 `addImportsDir` 允许你向 Nuxt 应用添加导入。`addImportsSources` 允许你从第三方包添加列出的导入到 Nuxt 应用。

这些工具由 [`unimport`](https://github.com/unjs/unimport) 提供支持，它是 Nuxt 中使用的底层自动导入机制。

::note
这些函数用于注册你自己的工具函数、组合函数和 Vue API。对于页面、组件和插件，请参阅相应章节：[页面](https://nuxt.zhcndoc.com/docs/3.x/api/kit/pages)、[组件](https://nuxt.zhcndoc.com/docs/3.x/api/kit/components)、[插件](https://nuxt.zhcndoc.com/docs/3.x/api/kit/plugins)。
::

::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
观看 Vue School 关于 Nuxt Kit 自动导入实用工具的视频。
::

## `addImports`

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

::tip
要为 Nitro 服务器上下文添加导入，请参阅 [`addServerImports`](https://nuxt.zhcndoc.com/docs/3.x/api/kit/nitro#addserverimports) 函数。
::

### 用法

```ts twoslash
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' }),
    )
  },
})
```

### 类型

```ts
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 应用中可用，无需手动导入。

### 用法

```ts twoslash
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'))
  },
})
```

### 类型

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

### 参数

| 属性        | 类型                                 | 必填      | 描述                                             |
| --------- | ---------------------------------- | ------- | ---------------------------------------------- |
| `dirs`    | `string \| string[]`{lang="ts"}    | `true`  | 字符串或字符串数组，指定要导入的目录路径。                          |
| `options` | `{ prepend?: boolean }`{lang="ts"} | `false` | 导入时的选项。如果 `prepend` 设置为 `true`，导入会被添加到导入列表的前面。 |

## `addImportsSources`

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

### 用法

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

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

### 类型

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

### 参数

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

- InlinePreset

| 属性        | 类型                                          | 必填     | 描述                          |
| --------- | ------------------------------------------- | ------ | --------------------------- |
| `from`    | `string`                                    | `true` | 要从中导入的模块说明符（specifier）。     |
| `imports` | `PresetImport \| ImportSource[]`{lang="ts"} | `true` | 一个对象或对象数组，可以是导入名称、导入对象或导入源。 |

- PackagePreset

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

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/imports.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.