---
title: "Auto-imports"
description: Nuxt Kit provides a set of utilities to help you work with auto-imports. These functions allow you to register your own utils, composables and Vue APIs.
links:
  - label: Source
    icon: i-simple-icons-github
    to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/imports.ts
    size: xs
---

Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins.

With Nuxt Kit you can also add your own auto-imports. `addImports` and `addImportsDir` allow you to add imports to the Nuxt application. `addImportsSources` allows you to add listed imports from 3rd party packages to the Nuxt application.

These utilities are powered by [`unimport`](https://github.com/unjs/unimport), which provides the underlying auto-import mechanism used in Nuxt.

::note
These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](/docs/4.x/api/kit/pages), [Components](/docs/4.x/api/kit/components), [Plugins](/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"}
Watch Vue School video about Auto-imports Nuxt Kit utilities.
::

## `addImports`

Add imports to the Nuxt application. It makes your imports available in the Nuxt app context without the need to import them manually.

::tip
To add imports for the Nitro server context, refer to the [`addServerImports`](/docs/4.x/api/kit/nitro#addserverimports) function.
::

### Usage

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

### Type

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

### Parameters

`imports`: An object or an array of objects with the following properties:

| Property   | Type                  | Required | Description                                                                                                     |
|------------|-----------------------|----------|-----------------------------------------------------------------------------------------------------------------|
| `name`     | `string`              | `true`   | Import name to be detected.                                                                                     |
| `from`     | `string`              | `true`   | Module specifier to import from.                                                                                |
| `priority` | `number`              | `false`  | Priority of the import; if multiple imports have the same name, the one with the highest priority will be used. |
| `disabled` | `boolean`             | `false`  | If this import is disabled.                                                                                     |
| `meta`     | `Record<string, any>` | `false`  | Metadata of the import.                                                                                         |
| `type`     | `boolean`             | `false`  | If this import is a pure type import.                                                                           |
| `typeFrom` | `string`              | `false`  | Use this as the `from` value when generating type declarations.                                                 |
| `as`       | `string`              | `false`  | Import as this name.                                                                                            |

## `addImportsDir`

Add imports from a directory to the Nuxt application. It will automatically import all files from the directory and make them available in the Nuxt application without the need to import them manually.

### Usage

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

### Type

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

### Parameters

| Property  | Type                               | Required | Description                                                                                                         |
|-----------|------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------|
| `dirs`    | `string \| string[]`{lang="ts"}    | `true`   | A string or an array of strings with the path to the directory to import from.                                      |
| `options` | `{ prepend?: boolean }`{lang="ts"} | `false`  | Options to pass to the import. If `prepend` is set to `true`, the imports will be prepended to the list of imports. |

## `addImportsSources`

Add listed imports to the Nuxt application.

### Usage

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

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

### Type

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

### Parameters

**importSources**: An object or an array of objects with the following properties:

- InlinePreset

| Property  | Type                                        | Required | Description                                                                                    |
|-----------|---------------------------------------------|----------|------------------------------------------------------------------------------------------------|
| `from`    | `string`                                    | `true`   | Module specifier to import from.                                                               |
| `imports` | `PresetImport \| ImportSource[]`{lang="ts"} | `true`   | An object or an array of objects, which can be import names, import objects or import sources. |

- PackagePreset

| Property  | Type                                        | Required | Description                                                                                    |
|-----------|---------------------------------------------|----------|------------------------------------------------------------------------------------------------|
| `package` | `string`                                    | `true`   | Name of the package.                                                               |