Как работает Nuxt?

Nuxt — минималистичный, но легко настраиваемый фреймворк для создания веб-приложений.

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

Интерфейс Nuxt

Когда вы запускаете Nuxt в режиме разработки с помощью nuxt dev или собираете приложение для продакшена с помощью nuxt build, будет создан общий контекст, который внутренне называется nuxt. Он содержит нормализованные опции, объединённые с файлом nuxt.config, некоторое внутреннее состояние и мощную систему хуков на основе unjs/hookable, позволяющих различным компонентам взаимодействовать друг с другом. Можно считать, что это Ядро Сборщика.

Этот контекст глобально доступен для использования с композаблами Nuxt Kit. Поэтому в каждом процессе может быть запущен только один экземпляр Nuxt.

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

Подробнее см. Исходный код.

Интерфейс NuxtApp

При рендере страницы в браузере или на сервере создаётся общий контекст nuxtApp. В этом контексте хранятся экземпляр Vue, хуки времени выполнения, а также внутреннее состояние — контекст SSR (ssrContext), полезная нагрузка для гидратации (payload) и другое. Можно считать, что это ядро времени выполнения.

Доступ к этому контексту можно получить с помощью композабла useNuxtApp() в Nuxt-плагинах, а также с помощью <script setup> и композаблов Vue. Глобальное использование возможно в браузере, но не на сервере, чтобы избежать совместного использования контекста между пользователями.

Поскольку useNuxtApp выбрасывает исключение, если контекст недоступен, а вашему композаблу не всегда нужен nuxtApp, можно использовать tryUseNuxtApp — он вернёт null вместо исключения.

Для расширения интерфейса nuxtApp и подключения к различным этапам или контекстам доступа можно использовать Nuxt-плагины.

Дополнительную информацию об этом интерфейсе можно найти в Nuxt App.

nuxtApp имеет следующие свойства:

// Упрощённая схема полей nuxtApp (см. исходники Nuxt)
interface NuxtAppShape {
  vueApp: unknown
  versions: unknown
  hooks: unknown
  hook: unknown
  callHook: unknown
  ssrContext?: {
    url: unknown
    req: unknown
    res: unknown
    runtimeConfig: unknown
    noSSR: unknown
  }
  payload: {
    serverRendered: boolean
    data: Record<string, unknown>
    state: Record<string, unknown>
  }
  provide: (name: string, value: unknown) => void
}

Подробнее см. Исходный код.

Контекст времени выполнения и контекст сборки

Nuxt собирает и компонует проект с помощью Node.js, но у приложения есть и среда выполнения.

Хотя обе области можно расширять, контекст времени выполнения изолирован от этапа сборки. Поэтому между ними не должно быть общего состояния, кода или контекста — кроме конфигурации времени выполнения!

nuxt.config и Nuxt-модули расширяют контекст сборки, а Nuxt-плагины — контекст времени выполнения.

При сборке приложения для продакшена nuxt build будет генерировать отдельную сборку в директории .output, не зависящую от nuxt.config и Nuxt-модулей.