Слои

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

Случаи использования

• Переиспользование предустановок конфигурации в проектах с помощью nuxt.config и app.config
• Создание библиотеки компонентов с использованием директории components/
• Создание библиотек утилит и композаблов с использованием директорий composables/ и utils/
• Создание предустановок модуля Nuxt
• Распространение стандартных настроек по всем проектам
• Создание тем Nuxt
• Лучшая организация кода за счёт модульной архитектуры и подхода в духе предметно-ориентированного проектирования (DDD) в крупных проектах.

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

По умолчанию все слои в каталоге ~~/layers внутри проекта автоматически регистрируются как слои Nuxt.

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

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

export default defineNuxtConfig({
  extends: [
    // Extend from a local layer
    '../base',
    // Extend from an installed npm package
    '@my-themes/awesome',
    // Extend from a git repository
    'github:my-themes/awesome#v1',
  ],
})

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

export default defineNuxtConfig({
  extends: [
    // per layer configuration
    ['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/
    components/Button.vue    # Base button style
  2.theme/
    components/Button.vue    # Themed button (overrides base)
app/
  components/Button.vue          # Project button (overrides all layers)

Тогда:

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

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

Порядок можно задать префиксами с номерами в именах каталогов слоёв:

layers/
  1.base/        # Lowest priority
  2.features/    # Medium priority
  3.admin/       # Highest priority (among layers)

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

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

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

export default defineNuxtConfig({
  extends: [
    '../base', // Local layer outside project
    '@my-themes/awesome', // NPM package
    'github:my-themes/awesome#v1', // Remote repository
  ],
})

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

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

Примеры