gil-wiki/reference/4.api/5.kit/4.autoimports.md

title, description, links

title	description	links
Auto-imports	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.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/kit/src/imports.ts 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, 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

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

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

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

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

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

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

Type

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.