Компоненты

Исходники
Регистрация компонентов глобально или локально, добавление директорий для сканирования.

Компоненты — базовые блоки приложения Nuxt, переиспользуемые экземпляры Vue для интерфейса. По умолчанию Nuxt автоматически импортирует компоненты из каталога components. Чтобы подключать компоненты из другого каталога или выборочно, в @nuxt/kit есть addComponentsDir и addComponent.

Видео Vue School про подключение компонентов.

addComponentsDir

Регистрирует каталог для сканирования компонентов; они подгружаются при использовании. Глобальная регистрация — только при global: true.

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

export default defineNuxtModule({
  meta: {
    name: '@nuxt/ui',
    configKey: 'ui',
  },
  setup () {
    addComponentsDir({
      path: resolve('./runtime/components'),
      prefix: 'U',
      pathPrefix: false,
    })
  },
})

Тип

function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

Параметры

dir — объект со свойствами:

СвойствоТипОбязательныйОписание
pathstringдаПуть к каталогу с компонентами (абсолютный или относительный). Можно использовать алиасы Nuxt (~, @) или путь к npm-пакету.
patternstring | string[]нетПаттерн для отбора файлов.
ignorestring[]нетПаттерны исключения.
prefixstringнетПрефикс для имён всех найденных компонентов.
pathPrefixbooleanнетДобавлять путь к имени компонента.
prefetchbooleanнетВ production — настройка prefetch для компонентов с префиксом Lazy (webpack).
preloadbooleanнетАналогично prefetch.
isAsyncbooleanнетЗагружать компонент асинхронно (отдельный chunk), даже без префикса Lazy.
extendComponent(component: Component) => Promise<Component | void> | (Component | void)нетФункция для каждого найденного компонента; принимает и возвращает объект компонента (или промис).
globalbooleanнетРегистрировать компоненты глобально.
islandbooleanнетРегистрировать как island. Подробнее: <NuxtIsland/>.
watchbooleanнетОтслеживать изменения в каталоге (добавление/удаление файлов).
extensionsstring[]нетРасширения файлов, поддерживаемые билдером Nuxt.
transpile'auto' | booleanнетТранспилировать путь через build.transpile. 'auto' — включить, если путь содержит node_modules/.

opts:

СвойствоТипОбязательныйОписание
prependbooleanнетtrue — добавить каталог в начало списка (unshift вместо push).

addComponent

Регистрирует один компонент для автоимпорта.

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

import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  setup () {
    const resolver = createResolver(import.meta.url)

    addComponent({
      name: 'NuxtImg',
      filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
    })

    addComponent({
      name: 'NuxtPicture',
      filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
    })
  },
})

Тип

function addComponent (options: AddComponentOptions): void

Параметры

options — объект со свойствами:

СвойствоТипОбязательныйОписание
namestringдаИмя компонента.
filePathstringдаПуть к компоненту.
declarationPathstringнетПуть к файлу деклараций; для type templates. По умолчанию — filePath.
pascalNamestringнетИмя в PascalCase; по умолчанию генерируется из name.
kebabNamestringнетИмя в kebab-case; по умолчанию генерируется из name.
exportstringнетИмя экспорта (named или default). По умолчанию 'default'.
shortPathstringнетКороткий путь; по умолчанию из пути к компоненту.
chunkNamestringнетИмя chunk; по умолчанию из имени компонента.
prefetchbooleanнетВ production — настройка prefetch для Lazy (webpack).
preloadbooleanнетАналогично prefetch.
globalbooleanнетРегистрировать глобально.
islandbooleanнетРегистрировать как island. См. <NuxtIsland/>.
mode'client' | 'server' | 'all'нетГде рендерить: клиент, сервер или оба. По умолчанию оба.
prioritynumberнетПриоритет; при совпадении имён используется компонент с большим приоритетом.

Примеры

Чтобы автоимпортировать компонент из npm-пакета как named export (не default), укажите опцию export.

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

export default defineNuxtModule({
  setup () {
    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
    addComponent({
      name: 'MyAutoImportedComponent',
      export: 'MyComponent',
      filePath: 'my-npm-package',
    })
  },
})