Автоимпорты

Исходники
Регистрация своих утилит, композаблов и Vue API для автоимпорта.

Nuxt автоматически подключает хелперы, композаблы и API Vue по всему приложению без явного импорта. По структуре каталогов приложение также получает автоимпорты для своих composables и плагинов.

Через Nuxt Kit можно добавлять свои автоимпорты: addImports и addImportsDir — добавление импортов в приложение; addImportsSources — добавление списка импортов из сторонних пакетов.

Под капотом используется unimport.

Эти функции предназначены для регистрации своих утилит, композаблов и Vue API. Для страниц, компонентов и плагинов см. Pages, Components, Plugins.
Видео Vue School про автоимпорты в Nuxt Kit.

addImports

Добавляет импорты в приложение Nuxt — они становятся доступны без явного импорта.

Для импортов в контексте Nitro-сервера используйте addServerImports.

Использование

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

Тип

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

Параметры

imports: объект или массив объектов со свойствами:

СвойствоТипОбязательныйОписание
namestringдаИмя импорта.
fromstringдаСпецификатор модуля.
prioritynumberнетПриоритет; при совпадении имён используется импорт с большим приоритетом.
disabledbooleanнетОтключить этот импорт.
metaRecord<string, any>нетМетаданные импорта.
typebooleanнетИмпорт только типов.
typeFromstringнетЗначение from при генерации деклараций типов.
asstringнетИмпортировать под этим именем.

addImportsDir

Добавляет импорты из каталога: все файлы из каталога становятся доступны в приложении без явного импорта.

Использование

import { addImportsDir, createResolver, defineNuxtModule } 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'))
  },
})

Тип

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

Параметры

СвойствоТипОбязательныйОписание
dirsstring | string[]даПуть к каталогу или массив путей.
options{ prepend?: boolean }нетprepend: true — добавить импорты в начало списка.

addImportsSources

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

Использование

import { addImportsSources, defineNuxtModule } from '@nuxt/kit'

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

Тип

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

Параметры

importSources: объект или массив объектов:

СвойствоТипОбязательныйОписание
fromstringдаСпецификатор модуля.
importsPresetImport | ImportSource[]даИмена импортов, объекты импортов или источники.