Learn Nuxt with a Collection of 100+ Tips!

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.

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 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.

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. Composables or plugins can use these functions.

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 application without the need to import them manually.

Type

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

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

Parameters

imports

Type: Import | Import[]

Required: true

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

  • from (required)
    Type: string
    Module specifier to import from.
  • priority (optional)
    Type: number
    Default: 1
    Priority of the import, if multiple imports have the same name, the one with the highest priority will be used.
  • disabled (optional)
    Type: boolean
    If this import is disabled.
  • meta (optional)
    Type: object
    Metadata of the import.
  • meta.description (optional)
    Type: string
    Short description of the import.
  • meta.docsUrl (optional)
    Type: string
    URL to the documentation.
  • meta[key] (optional)
    Type: any
    Additional metadata.
  • type (optional)
    Type: boolean
    If this import is a pure type import.
  • typeFrom (optional)
    Type: string
    Using this as the from when generating type declarations.
  • name (required)
    Type: string
    Import name to be detected.
  • as (optional)
    Type: string
    Import as this name.

Examples

// https://github.com/pi0/storyblok-nuxt
import { defineNuxtModule, addImports, createResolver } 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" })
    );
  }
})

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.

Type

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

Parameters

dirs

Type: string | string[]

Required: true

A string or an array of strings with the path to the directory to import from.

options

Type: { prepend?: boolean }

Default: {}

Options to pass to the import. If prepend is set to true, the imports will be prepended to the list of imports.

Examples

// https://github.com/vueuse/motion/tree/main/src/nuxt
import { defineNuxtModule, addImportsDir, createResolver } 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'))
  },
})

addImportsSources

Add listed imports to the Nuxt application.

Type

function addImportsSources (importSources: ImportSource | ImportSource[]): void

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

interface ImportSource extends Import {
  imports: (PresetImport | ImportSource)[]
}

type PresetImport = Omit<Import, 'from'> | string | [name: string, as?: string, from?: string]

Parameters

importSources

Type: ImportSource | ImportSource[]

Required: true

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

  • imports (required)
    Type: PresetImport | ImportSource[]
    Required: true
    An object or an array of objects, which can be import names, import objects or import sources.
  • from (required)
    Type: string
    Module specifier to import from.
  • priority (optional)
    Type: number
    Default: 1
    Priority of the import, if multiple imports have the same name, the one with the highest priority will be used.
  • disabled (optional)
    Type: boolean
    If this import is disabled.
  • meta (optional)
    Type: object
    Metadata of the import.
  • meta.description (optional)
    Type: string
    Short description of the import.
  • meta.docsUrl (optional)
    Type: string
    URL to the documentation.
  • meta[key] (optional)
    Type: any
    Additional metadata.
  • type (optional)
    Type: boolean
    If this import is a pure type import.
  • typeFrom (optional)
    Type: string
    Using this as the from when generating type declarations.
  • name (required)
    Type: string
    Import name to be detected.
  • as (optional)
    Type: string
    Import as this name.

Examples

// https://github.com/elk-zone/elk
import { defineNuxtModule, addImportsSources } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // add imports from h3 to make them autoimported
    addImportsSources({
      from: 'h3',
      imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
    })
  }
})