Auto-imports

source code

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.

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.

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