Автоимпорты

Nuxt автоматически импортирует вспомогательные функции, композаблы и API Vue для использования в вашем приложении без их явного импорта. Основываясь на структуре директорий, каждое приложение Nuxt может также использовать автоимпорт для своих собственных композаблов и плагинов. В Nuxt Kit вы также можете добавлять свои собственные автоимпорты. addImports и addImportsDir позволяют добавлять импорты в приложение Nuxt. addImportsSources позволяет добавлять в приложение Nuxt перечисленные импорты из пакетов сторонних разработчиков.

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

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

Тип

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
}

Параметры

imports

Тип: Import | Import[]

Обязательный: true

Объект или массив объектов со следующими свойствами:

• from (обязательный)
  Тип: string
  Спецификатор модуля для импорта.
• priority (опциональный)
  Тип: number
  По умолчанию: 1
  Приоритет импорта, если несколько импортов имеют одинаковое имя, будет использован тот, который имеет наивысший приоритет.
• disabled (опциональный)
  Тип: boolean
  Если этот импорт отключен.
• meta (опциональный)
  Тип: object
  Мета-данные импорта.
• meta.description (опциональный)
  Тип: string
  Краткое описание импорта.
• meta.docsUrl (опциональный)
  Тип: string
  URL к документации.
• meta[key] (опциональный)
  Тип: any
  Дополнительные мета-данные.
• type (опциональный)
  Тип: boolean
  Если этот импорт является просто импортом типа.
• typeFrom (опциональный)
  Тип: string
  Используйте это при генерации объявления типов.
• name (обязательный)
  Тип: string
  Имя импорта, которое должно быть обнаружено.
• as (опциональный)
  Тип: string
  Импортировать под этим именем.

Примеры

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

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

Тип

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

Параметры

dirs

Тип: string | string[]

Обязательный: true

Строка или массив строк, содержащий путь к директории, из которой будет производиться импорт.

options

Тип: { prepend?: boolean }

По умолчанию: {}

Параметры для передачи импорту. Если prepend имеет значение true, импорт будет добавлен в начало списка импортов.

Примеры

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

Добавляет перечисленные импорты в приложение Nuxt.

Тип

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]

Параметры

importSources

Тип: ImportSource | ImportSource[]

Обязательный: true

Объект или массив объектов со следующими свойствами:

• imports (обязательный)
  Тип: PresetImport | ImportSource[]
  Обязательный: true
  Объект или массив объектов, которые могут быть именами импорта, объектами импорта или источниками импорта.
• from (обязательный)
  Тип: string
  Спецификатор модуля для импорта.
• priority (опциональный)
  Тип: number
  По умолчанию: 1
  Приоритет импорта, если несколько импортов имеют одинаковое имя, будет использован тот, который имеет наивысший приоритет.
• disabled (опциональный)
  Тип: boolean
  Если этот импорт отключен.
• meta (опциональный)
  Тип: object
  Мета-данные импорта.
• meta.description (опциональный)
  Тип: string
  Краткое описание импорта.
• meta.docsUrl (опциональный)
  Тип: string
  URL к документации.
• meta[key] (опциональный)
  Тип: any
  Дополнительные мета-данные.
• type (опциональный)
  Тип: boolean
  Если этот импорт является просто импортом типа.
• typeFrom (опциональный)
  Тип: string
  Используйте это при генерации объявления типов.
• name (обязательный)
  Тип: string
  Имя импорта, которое должно быть обнаружено.
• as (опциональный)
  Тип: string
  Импортировать под этим именем.

Примеры

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

export default defineNuxtModule({
  setup() {
    // добавляем импорты из h3, чтобы сделать их автоимпортируемыми
    addImportsSources({
      from: 'h3',
      imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
    })
  }
})