Автоимпорты

Исходники
Nuxt Kit предоставляет набор утилит для работы с автоимпортами. Эти функции позволяют регистрировать собственные утилиты, композаблы и API Vue.

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.

Эти функции предназначены для регистрации собственных утилит, композаблов и API Vue. Для страниц, компонентов и плагинов, пожалуйста, обратитесь к специальным разделам: Страницы, Компоненты, Плагины.
Посмотрите видеоролик от Vue School об утилитах авто-импортов в Nuxt Kit.

addImports

Добавляет импорт в приложение Nuxt. Это делает ваши импорты доступными в приложении Nuxt без необходимости импортировать их вручную.

Usage

import { defineNuxtModule, addImports } 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

Параметры

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

PropertyTypeRequiredDescription
namestringtrueImport name to be detected.
fromstringtrueModule specifier to import from.
prioritynumberfalsePriority of the import; if multiple imports have the same name, the one with the highest priority will be used.
disabledbooleanfalseIf this import is disabled.
metaRecord<string, any>falseMetadata of the import.
typebooleanfalseIf this import is a pure type import.
typeFromstringfalseUse this as the from value when generating type declarations.
asstringfalseImport 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 { 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'))
  },
})

Type

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

Параметры

PropertyTypeRequiredDescription
dirsstring | string[]trueA string or an array of strings with the path to the directory to import from.
options{ prepend?: boolean }falseOptions 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 { defineNuxtModule, addImportsSources } from '@nuxt/kit'

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

Type

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

Parameters

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

PropertyTypeRequiredDescription
fromstringtrueModule specifier to import from.
importsPresetImport | ImportSource[]trueAn object or an array of objects, which can be import names, import objects or import sources.