Что такое Nuxt и зачем он Vue

Vue даёт компоненты, а Nuxt — целое приложение: рендеринг на сервере, маршруты из файлов и серверный API в одном проекте.

Суть: Nuxt — это мета-фреймворк. Он берёт Vue и достраивает вокруг него всё, что нужно для продакшена: сервер, роутинг, сборку, SEO и деплой. Вы пишете компоненты Vue, а Nuxt решает, где и когда их выполнить — на сервере или в браузере.

Когда вы пишете на чистом Vue, вы получаете отличную библиотеку для построения интерфейса. Но дальше начинаются вопросы, на которые Vue не отвечает сам: как сделать так, чтобы страница приходила поисковику уже с готовым HTML? Как организовать десятки маршрутов? Где держать серверный код, который дёргает базу данных? Как собрать всё это в один деплой? Каждый из этих вопросов в мире Vue решается отдельной библиотекой, и собирать их вместе — отдельная инженерная работа.

Nuxt делает эту работу за вас. Это надстройка над Vue, которая из коробки даёт серверный рендеринг (SSR), маршрутизацию на основе файловой структуры, автоматические импорты, серверные API-маршруты через движок Nitro и готовую конфигурацию сборки. Аналогия из мира React — это Next.js. Для Vue таким фреймворком стал Nuxt.

Важно понять расстановку слоёв. Vue — это движок реактивности и компонентов. Nuxt — это оркестратор: он не заменяет Vue, а дирижирует им. Под капотом Nuxt использует Vite для сборки, Vue Router для маршрутов и Nitro как серверный движок. Вы взаимодействуете с единым фреймворком, но внутри это слаженный оркестр проверенных инструментов.

        Слои Nuxt-приложения

   +---------------------------------+
   |   Ваши страницы и компоненты    |  <- вы пишете здесь
   +---------------------------------+
   |        Nuxt (оркестратор)       |  роутинг, авто-импорт, SSR
   +----------+-----------+----------+
   |   Vue    |   Vite    |  Nitro   |  движки под капотом
   | компонен | сборка    | сервер   |
   +----------+-----------+----------+

Зачем это нужно на практике? Представьте интернет-магазин. Карточка товара должна моментально показываться поисковику и пользователю — это работа SSR. Список товаров приходит из базы — нужен серверный маршрут. Десятки страниц категорий — нужен роутинг. Корзина живёт между страницами — нужно общее состояние. Чистый Vue потребовал бы собрать пять разных решений. Nuxt даёт всё это согласованно.

Ещё одна причина выбрать Nuxt — экосистема модулей. Авторизация, работа с изображениями, интернационализация, аналитика, подключение CMS — для всего этого есть официальные и сторонние модули, которые ставятся одной строкой в nuxt.config и интегрируются в авто-импорты и сборку без ручной возни. Вместо того чтобы собирать стек из десятка несвязанных библиотек и склеивать их самому, вы получаете согласованный набор кирпичиков, рассчитанных работать вместе. Это экономит недели на старте проекта и снимает целый класс ошибок интеграции, которые в чистом Vue вам пришлось бы отлаживать вручную.

Как работает под капотом

Когда вы запускаете nuxt dev, поднимается dev-сервер на базе Vite. Nuxt сканирует папки вашего проекта: pages/ превращается в маршруты, components/ и composables/ становятся доступны без импортов, server/ компилируется в серверные обработчики. На запрос пользователя Nuxt запускает ваше Vue-приложение на сервере, отдаёт готовый HTML, а затем «оживляет» его в браузере — это и есть гидратация, к ней мы вернёмся отдельно.

Ключевая идея — единый код, который умеет выполняться в двух средах. Один и тот же компонент рендерится сначала на сервере (Node.js), потом продолжает жить в браузере. Это называется универсальным (изоморфным) приложением.

Частые ошибки

Считать Nuxt «тяжёлым Vue». Nuxt не делает Vue медленнее — наоборот, SSR ускоряет первую отрисовку. Накладные расходы есть только на сервере, и они окупаются скоростью и SEO.
Тащить в Nuxt браузерные API напрямую. Код выполняется и на сервере, где нет window и document. Об этом — отдельный урок.
Путать Nuxt 2 и Nuxt 3/4. Старые туториалы по Nuxt 2 (Options API, опция asyncData, Webpack) к современному Nuxt почти не применимы. Ориентируйтесь на Nuxt 3 и 4.

Best practices

Начинайте новый проект сразу на актуальной версии Nuxt (3.x или 4.x) — миграция со старого Nuxt 2 болезненна.
Думайте о Nuxt как о наборе соглашений: положили файл в нужную папку — получили поведение. Меньше конфигурации, больше структуры.
Не отказывайтесь от SSR «на всякий случай» — он включён по умолчанию и почти всегда полезен.

Итог: Nuxt — это Vue, доросший до полноценного фулстек-фреймворка. Он берёт на себя сервер, роутинг, импорты и деплой, оставляя вам удовольствие писать компоненты. Дальше мы разберём главное, ради чего его берут — серверный рендеринг.