Слои (Layers)

Одна из ключевых возможностей Nuxt — слои и расширение. Можно расширять приложение по умолчанию и переиспользовать компоненты, утилиты и конфигурацию. Структура слоя почти совпадает со структурой обычного Nuxt-приложения, поэтому слои удобно писать и поддерживать.

Сценарии использования

• Общие пресеты конфигурации через nuxt.config и app.config
• Библиотека компонентов в директории app/components/
• Утилиты и композаблы в app/composables/ и app/utils/
• Пресеты для Nuxt-модулей
• Общая настройка в нескольких проектах
• Темы Nuxt
• Модульная архитектура и DDD в крупных проектах

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

По умолчанию все слои из директории ~~/layers в проекте автоматически подхватываются как слои.

Для каждого такого слоя создаётся алиас к его srcDir. Например, слой ~~/layers/test доступен как #layers/test.

Подключить слой можно через свойство extends в nuxt.config:

export default defineNuxtConfig({
  extends: [
    // Локальный слой
    '../base',
    // npm-пакет
    '@my-themes/awesome',
    // Git-репозиторий
    'github:my-themes/awesome#v1',
  ],
})

Для приватного репозитория на GitHub можно передать токен:

export default defineNuxtConfig({
  extends: [
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }],
  ],
})

export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      {
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ],
})

Для удалённых слоёв Nuxt использует unjs/c12 и unjs/giget. Подробности и все опции — в их документации.

Приоритет слоёв

При нескольких слоях важен порядок переопределения: слой с более высоким приоритетом перекрывает файлы и компоненты слоёв с меньшим приоритетом.

Порядок приоритета (от высшего к низшему)

1. Файлы вашего проекта — всегда наивысший приоритет
2. Автосканируемые слои из ~~/layers — сортировка по алфавиту (Z выше A)
3. Слои из extends — первый элемент в списке имеет приоритет над вторым

Пример

Несколько слоёв определяют один и тот же компонент:

layers/
  1.base/
    app/components/Button.vue    # Базовая кнопка
  2.theme/
    app/components/Button.vue    # Тематическая кнопка (перекрывает base)
app/
  components/Button.vue          # Кнопка проекта (перекрывает все слои)

В итоге:

• Если в проекте нет своего Button.vue, используется 2.theme/Button.vue (выше по алфавиту)
• Если есть app/components/Button.vue, он перекрывает оба слоя

Управление приоритетом

Порядок слоёв в ~~/layers можно задать числовым префиксом:

layers/
  1.base/        # Самый низкий приоритет
  2.features/    # Средний
  3.admin/       # Самый высокий среди слоёв

Когда что использовать

• ~~/layers — для локальных слоёв внутри проекта
• extends — для внешних зависимостей (npm, удалённые репозитории) или слоёв вне директории проекта

Пример с extends

export default defineNuxtConfig({
  extends: [
    '../base',
    '@my-themes/awesome',
    'github:my-themes/awesome#v1',
  ],
})

Если есть ещё ~~/layers/custom, порядок приоритета:

• Файлы проекта (выше всего)
• ~~/layers/custom
• ../base
• @my-themes/awesome
• github:my-themes/awesome#v1 (ниже всего)

Примеры