Компоненты

Компоненты - это строительные блоки вашего приложения Nuxt. Они представляют собой переиспользуемые инстансы Vue, которые могут быть использованы для создания пользовательского интерфейса. В Nuxt компоненты из директории components по умолчанию импортируются автоматически. Однако, если вам нужно импортировать компоненты из альтернативной директории или вы хотите выборочно импортировать их по мере необходимости, @nuxt/kit предоставляет методы addComponentsDir и addComponent. Эти утилиты позволяют настроить конфигурацию компонентов в соответствии с вашими потребностями.

addComponentsDir

Регистрирует директорию, которая будет сканироваться на наличие компонентов и импортироваться только при использовании. Помните, что при этом не происходит глобальной регистрации компонентов, пока вы не укажете опцию global: true.

Тип

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

interface ComponentsDir {
  path: string
  pattern?: string | string[]
  ignore?: string[]
  prefix?: string
  pathPrefix?: boolean
  enabled?: boolean
  prefetch?: boolean
  preload?: boolean
  isAsync?: boolean
  extendComponent?: (component: Component) => Promise<Component | void> | (Component | void)
  global?: boolean
  island?: boolean
  watch?: boolean
  extensions?: string[]
  transpile?: 'auto' | boolean
}

// При необходимости вы можете дополнить этот интерфейс (экспортированный из `@nuxt/schema`)
interface ComponentMeta {
  [key: string]: unknown
}

interface Component {
  pascalName: string
  kebabName: string
  export: string
  filePath: string
  shortPath: string
  chunkName: string
  prefetch: boolean
  preload: boolean
  global?: boolean
  island?: boolean
  mode?: 'client' | 'server' | 'all'
  priority?: number
  meta?: ComponentMeta
}

Параметры

dir

Тип: ComponentsDir

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

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

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

opts

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

• prepend (опциональный)
  Тип: boolean
  Если установлено значение true, директория будет добавлена в массив с помощью unshift() вместо push().

addComponent

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

Тип

async function addComponent (options: AddComponentOptions): void

interface AddComponentOptions {
  name: string,
  filePath: string,
  pascalName?: string,
  kebabName?: string,
  export?: string,
  shortPath?: string,
  chunkName?: string,
  prefetch?: boolean,
  preload?: boolean,
  global?: boolean,
  island?: boolean,
  mode?: 'client' | 'server' | 'all',
  priority?: number,
}

Параметры

options

Тип: AddComponentOptions

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

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

• name (обязательный)
  Тип: string
  Название компонента.
• filePath (обязательный)
  Тип: string
  Путь к компоненту.
• pascalName (опциональный)
  Тип: pascalCase(options.name)
  Имя компонента в PascalCase. Если имя не указано, оно будет сгенерировано из имени компонента.
• kebabName (опциональный)
  Тип: kebabCase(options.name)
  Имя компонента в kebab-case. Если имя не указано, оно будет сгенерировано из имени компонента.
• export (опциональный)
  Тип: string
  По умолчанию: 'default'
  Устанавливает именованный экспорт или экспорт по умолчанию. Если не указано, то будет установлено значение 'default'.
• shortPath (опциональный)
  Тип: string
  Короткий путь к компоненту. Если он не указан, то будет сгенерирован из пути к компоненту.
• chunkName (опциональный)
  Тип: string
  По умолчанию: 'components/' + kebabCase(options.name)
  Имя чанка для компонента. Если имя не указано, оно будет сгенерировано из имени компонента.
• prefetch (опциональный)
  Тип: boolean
  Эти свойства (prefetch/preload) используются в продакшене для настройки того, как компоненты с префиксом Lazy будут обрабатываться webpack с помощью его магических комментариев. Узнайте больше в документации webpack
• preload (опциональный)
  Тип: boolean
  Эти свойства (prefetch/preload) используются в продакшене для настройки того, как компоненты с префиксом Lazy будут обрабатываться webpack с помощью его магических комментариев. Узнайте больше в документации webpack
• global (опциональный)
  Тип: boolean
  По умолчанию: false
  Если включено, регистрирует компонент для глобальной доступности.
• island (опциональный)
  Тип: boolean
  Если включено, регистрирует компонент как остров. Подробнее об островах вы можете прочитать в описании компонента <NuxtIsland/>.
• mode (опциональный)
  Тип: 'client' | 'server' | 'all'
  По умолчанию: 'all'
  Эта опция указывает, где компонент должен отображаться - на клиенте, сервере или и там, и там. По умолчанию он будет отображаться как на клиенте, так и на сервере.
• priority (опциональный)
  Тип: number
  По умолчанию: 1
  Приоритет компонента: если несколько компонентов имеют одинаковое имя, будет использоваться тот, у которого самый высокий приоритет.