Компоненты

Исходный код

Nuxt Kit предоставляет утилиты для работы с компонентами — глобальной и локальной регистрации и подключения каталогов для сканирования.

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

Посмотрите видео от Vue School о внедрении компонентов.

`addComponentsDir`

Регистрирует каталог для сканирования компонентов с подгрузкой по использованию (tree-shaking). Глобальная регистрация не включается, пока не задано 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 — объект со свойствами:

Свойство	Тип	Обязательно	Описание
`path`	`string`	`true`	Абсолютный или относительный путь к каталогу с компонентами. Допустимы алиасы Nuxt (`~`, `@`) и путь к npm-пакету (как в `require`).
`pattern`	`string \| string[]`	`false`	Glob-шаблон отбора файлов внутри `path`.
`ignore`	`string[]`	`false`	Glob-шаблоны файлов, которые не учитывать.
`prefix`	`string`	`false`	Префикс имён зарегистрированных компонентов.
`pathPrefix`	`boolean`	`false`	Добавлять к имени компонента префикс из относительного пути файла.
`enabled`	`boolean`	`false`	При `false` этот каталог не сканируется.
`prefetch`	`boolean`	`false`	Свойства `prefetch`/`preload` в продакшене настраивают обработку компонентов с префиксом Lazy в webpack через «магические» комментарии. Подробнее — в документации webpack.
`preload`	`boolean`	`false`	Свойства `prefetch`/`preload` в продакшене настраивают обработку компонентов с префиксом Lazy в webpack через «магические» комментарии. Подробнее — в документации webpack.
`isAsync`	`boolean`	`false`	Флаг: компонент загружать асинхронно (отдельным чанком), независимо от использования префикса Lazy.
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)`	`false`	Вызывается для каждого найденного компонента; принимает его описание и возвращает изменённый объект или `Promise` с ним.
`global`	`boolean`	`false`	При включении регистрирует компоненты глобально.
`island`	`boolean`	`false`	При включении регистрирует компоненты как острова (islands). Подробнее — в описании `<NuxtIsland/>`.
`watch`	`boolean`	`false`	Отслеживать изменения указанного пути, включая добавление и удаление файлов.
`extensions`	`string[]`	`false`	Расширения файлов, поддерживаемые сборщиком Nuxt.
`transpile`	`'auto' \| boolean`	`false`	Прокидывать путь в `build.transpile`. Значение `'auto'` включает транспиляцию (`true`), если в пути встречается `node_modules/`.

opts

Свойство	Тип	Обязательно	Описание
`prepend`	`boolean`	`false`	При `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 — объект со свойствами:

Свойство	Тип	Обязательно	Описание
`name`	`string`	`true`	Имя компонента.
`filePath`	`string`	`true`	Путь к файлу компонента.
`pascalName`	`string`	`false`	Имя в PascalCase; по умолчанию выводится из `name`.
`kebabName`	`string`	`false`	Имя в kebab-case; по умолчанию выводится из `name`.
`export`	`string`	`false`	Именованный или default-экспорт. Если не задано, используется `'default'`.
`shortPath`	`string`	`false`	Краткий путь к компоненту. Если не задан, выводится из пути к файлу.
`chunkName`	`string`	`false`	Имя чанка для компонента. Если не задано, выводится из имени компонента.
`prefetch`	`boolean`	`false`	Свойства `prefetch`/`preload` в продакшене настраивают обработку компонентов с префиксом Lazy в webpack через «магические» комментарии. Подробнее — в документации webpack.
`preload`	`boolean`	`false`	Свойства `prefetch`/`preload` в продакшене настраивают обработку компонентов с префиксом Lazy в webpack через «магические» комментарии. Подробнее — в документации webpack.
`global`	`boolean`	`false`	При включении регистрирует компонент глобально.
`island`	`boolean`	`false`	При включении регистрирует компонент как остров (island). Подробнее — в описании `<NuxtIsland/>`.
`mode`	`'client' \| 'server' \| 'all'`	`false`	Где рендерить: только клиент, только сервер или везде. По умолчанию — клиент и сервер.
`priority`	`number`	`false`	Приоритет компонента; при совпадении имён используется компонент с наибольшим приоритетом.

Примеры

Чтобы автоимпортировать компонент из npm-пакета как именованный экспорт (не 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',
    })
  },
})

Был ли материал полезен?

Сообщить об ошибке или Редактировать на GitHub

Автоимпорты

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

Контекст

Nuxt Kit предоставляет утилиты для доступа к контексту выполнения Nuxt из модулей и вспомогательного кода.