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

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

Nuxt 会自动导入辅助函数、composables 和 Vue API，以便在应用中使用而无需显式导入。基于目录结构，每个 Nuxt 应用也可以为其自身的 composables 和插件使用自动导入。

使用 Nuxt Kit 你也可以添加自定义的自动导入。`addImports` 和 `addImportsDir` 允许你向 Nuxt 应用添加导入。`addImportsSources` 允许你将第三方包中列出的导入添加到 Nuxt 应用中。

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

::note
这些函数用于注册你自己的工具、composables 和 Vue API。对于页面、组件和插件，请参阅对应的章节：[Pages](https://nuxt.zhcndoc.com/docs/4.x/api/kit/pages)、[Components](https://nuxt.zhcndoc.com/docs/4.x/api/kit/components)、[Plugins](https://nuxt.zhcndoc.com/docs/4.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/4.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: NuxtImport | NuxtImport[]): 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[]`    | `true`  | 指向要导入的目录的路径，字符串或字符串数组。                               |
| `options` | `{ prepend?: boolean }` | `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: NuxtImportPresetSource | NuxtImportPresetSource[]): void
```

### 参数

**importSources**：一个对象或对象数组，具有以下属性：

- `NuxtImportPreset`

| 属性        | 类型                                                   | 必需     | 描述                      |
| --------- | ---------------------------------------------------- | ------ | ----------------------- |
| `from`    | `string`                                             | `true` | 要从中导入的模块说明符。            |
| `imports` | `(NuxtImportEntry \| NuxtImportPreset)[]`{lang="ts"} | `true` | 条目数组，可以是导入名称、导入对象或嵌套预设。 |

- `NuxtPackageImportPreset`

| 属性        | 类型       | 必需     | 描述    |
| --------- | -------- | ------ | ----- |
| `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.