Как устроен Nuxt?

Nuxt — минимальный и гибкий фреймворк для веб-приложений.

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

Интерфейс Nuxt

При запуске nuxt dev или сборке nuxt build создаётся общий контекст — объект nuxt. В нём нормализованные опции (слияние с nuxt.config), внутреннее состояние и система хуков на базе unjs/hookable для взаимодействия частей фреймворка. Это ядро сборки (Builder Core).

Контекст доступен глобально через композаблы Nuxt Kit. В одном процессе может работать только один экземпляр Nuxt.

Расширение интерфейса Nuxt и подключение к этапам сборки — через модули Nuxt. Подробнее — в исходном коде.

Интерфейс NuxtApp

При рендеринге страницы в браузере или на сервере создаётся общий контекст nuxtApp: экземпляр Vue, runtime-хуки, ssrContext, payload для гидрации. Это ядро рантайма (Runtime Core).

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

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

Расширение nuxtApp и подключение к этапам рантайма — через плагины Nuxt. Подробнее — Nuxt App.

Свойства nuxtApp: vueApp, versions, hooks, hook, callHook; на сервере — ssrContext (url, req, res, runtimeConfig, noSSR); сериализуемый payload (serverRendered, data, state); метод provide(name, value).

Контекст сборки и рантайм

Nuxt собирает проект в Node.js, но есть и рантайм. Рантайм изолирован от этапа сборки: общее у них только runtime-конфигурация. Конфиг и модули расширяют контекст сборки; плагины — рантайм. При nuxt build в .output попадает автономная сборка, не зависящая от nuxt.config и модулей.

Был ли материал полезен?