Learn Nuxt with a Collection of 100+ Tips!

Автоимпорты

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

Автоимпорты

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

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

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