Auto-imports

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, 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, Components, 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 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:

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#

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

• PackagePreset