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

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

Интерфейс Nuxt

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

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

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

Для получения более подробной информации ознакомьтесь с исходным кодом.

Интерфейс NuxtApp

При рендере страницы в браузере или на сервере будет создан общий контекст, называемый nuxtApp. В этом контексте хранятся инстанс vue, runtime хуки, а также внутренние состояния, такие как ssrContext и payload для гидратации. Можно считать, что это Runtime ядро.

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

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

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

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

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

const nuxtApp = {
  vueApp, // глобальное приложение Vue: https://ru.vuejs.org/api/application.html#application-api

  versions, // объект, содержащий версии Nuxt и Vue

  // Они позволяют вызывать и добавлять runtime хуки NuxtApp
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Доступно только на сервере
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // Это будет преобразовано в строку и передано от сервера к клиенту
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

Более подробную информацию можно найти в исходном коде.

Runtime контекст против контекста сборки

Nuxt собирает и компонует проект с помощью Node.js, но также имеет и runtime.

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

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

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