Слои (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          # Кнопка проекта (перекрывает все слои)

В этом случае:

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

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

Префиксы с номерами в именах директорий слоёв задают порядок:

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

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

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

Полный пример с extends

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

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

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

Примеры