Разработка · 7 мин чтения

Vue 3 или Nuxt: что выбрать под проект

Беру проект, клиент присылает бриф, и там уже прописано «фронтенд на Vue» - а следующим сообщением прилетает вопрос: «а может, сразу на Nuxt?». Вопрос vue 3 или nuxt всплывает почти на каждом проекте, где фронтенд собирают с нуля, и путаницы вокруг него больше, чем должно быть: Nuxt - не конкурент Vue 3, а надстройка над ним. Но выбор между голым Vue 3 и Nuxt меняет архитектуру, сроки сдачи и итоговый бюджет, поэтому разбираться в разнице лучше до старта разработки, а не на середине спринта.

Vue 3 или Nuxt: в чём разница на уровне архитектуры

Реактивное ядро одинаковое: Composition API, reactivity system, компоненты с <script setup> работают в обоих случаях без изменений. Разница начинается там, где заканчивается компонент. Vue 3 с Vite из коробки даёт SPA - приложение рендерится в браузере, роутинг и стейт-менеджер (vue-router, Pinia) подключаете сами, серверной части нет вообще. Nuxt добавляет поверх этого файловый роутинг по структуре папок, SSR и статическую генерацию через движок Nitro, автоимпорт компонентов и composables, серверные API-роуты прямо в проекте и экосистему модулей под авторизацию, SEO-мету, изображения.

На практике это означает: с Vue 3 я контролирую каждый винтик руками и плачу за это временем на настройку, с Nuxt получаю рабочий каркас за 10 минут, но живу по его конвенциям. TypeScript и Vitest одинаково хорошо заводятся в обоих случаях, а вот стейт-менеджмент отличается: в чистом Vue 3 состояние между компонентами держит Pinia, которую подключаете отдельным пакетом, в Nuxt для простых случаев хватает автоимпортируемого useState. Для команды из нескольких разработчиков файловая структура Nuxt снижает разнобой в архитектуре - новый человек открывает папку pages и сразу понимает, где что лежит, тогда как в голом Vue 3 такую структуру приходится закреплять соглашениями внутри команды.

Когда хватает чистого Vue 3 без Nuxt

Если продукт живёт за авторизацией и его не индексирует поисковик, SSR не даёт почти ничего, кроме лишней сложности деплоя. Сюда попадают внутренние админки, CRM-панели, BI-дашборды, встроенные виджеты.

Делал BI-дашборд для логистической компании: нужно было вывести статусы доставок с трекингом СДЭК, показатели по заказам и графики выручки за период. Всё крутится за логином, гуглу там нечего смотреть - поставил Vue 3 плюс Vite, без единой строчки серверного рендеринга. Разработка заняла примерно на неделю меньше, чем ушла бы на аналогичный дашборд с Nuxt: не пришлось думать про гидратацию, серверные куки и разницу поведения кода на клиенте и сервере.

Второй частый случай - встраиваемые виджеты. Если на сайте уже есть Tilda-скрипты и нужно докинуть калькулятор или форму с логикой посложнее обычной вставки, компонент на Vue 3 монтируется прямо в блок Tilda через createApp().mount() - Nuxt здесь просто негде развернуться, целого приложения с роутингом никто не просит.

Когда без Nuxt не обойтись: SSR и SEO

Как только страницу должен нормально проиндексировать Google или Яндекс, чистый SPA на Vue 3 начинает мешать: поисковый бот получает пустой div#app, а контент дорисовывается уже после выполнения JS. Такое поведение поисковики переваривают не всегда стабильно, а если добавить требования по скорости первой отрисовки - SPA проигрывает почти всегда.

Собирал интернет-магазин с товарами из WooCommerce: бэкенд и админка каталога остались на WordPress, а витрину вынес на headless-фронт на Nuxt, потому что карточка товара должна отдаваться поисковику уже с текстом и ценой в HTML, без ожидания гидратации. Заодно серверные роуты Nuxt приняли на себя вебхук от Т‑Банка со статусом оплаты - не пришлось поднимать отдельный бэкенд-сервис только ради одного эндпоинта. По похожей схеме ставил на другой проект чат-виджет с базой знаний на RAG: виджет дёргал серверный роут Nuxt, а тот проксировал запросы к Claude API, - отдельного бэкенда под чат заводить не пришлось.

Минимальный конфиг для сценария с кэшированием каталога и приёмом вебхука выглядит примерно так:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/catalog/**': { swr: 3600 },
      '/api/tbank-webhook': { cors: true }
    }
  }
})

Сравнение Vue 3 и Nuxt по типовым задачам

Задача Vue 3 (SPA) Nuxt
Админка, CRM, BI-дашборд Оптимально Избыточно
Интернет-магазин, каталог Плохо для SEO Оптимально
Лендинг под рекламу Нужен доп. пререндер Оптимально
SaaS-сервис за логином Оптимально Избыточно
Блог, контентный сайт Плохо для SEO Оптимально
Скорость старта разработки Выше Ниже из-за конвенций

Бесплатный материал

🎁 Полезный скрипт в подарок

Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.

Без спама. Отписка в 1 клик.

Хостинг и производительность: за что платите при SSR

SPA на Vue 3 после сборки - это просто набор статических файлов: HTML, JS, CSS. Кладёте на любой статический хостинг или CDN, процесс на сервере не нужен, счёт за хостинг минимальный.

Nuxt с включённым SSR требует Node-процесс, который рендерит страницы на каждый запрос: нужен VPS, PM2 или serverless-платформа с поддержкой Node, и это уже отдельная статья расходов на инфраструктуру. Выход - режим статической генерации (nuxt generate), когда HTML собирается заранее и раздаётся как статика, а SSR включается только там, где контент реально меняется по запросу, например в личном кабинете. Для интернет-магазинов с редко обновляемым каталогом такую пересборку удобно вешать на автоматизацию в n8n: обновили цену в CRM - сработал вебхук - n8n дёрнул пересборку статики без ручных действий со стороны команды.

Сколько стоит разработка на Vue 3 и на Nuxt

Цена зависит не от названия фреймворка, а от объёма логики и от того, нужен ли SSR-слой с серверными роутами. По моим расценкам: BI-дашборд или админка на чистом Vue 3 - от 90 000 ₽, если это SPA без серверного рендера. Более сложный веб-сервис с личным кабинетом, ролями и интеграциями - от 150 000 ₽. Интернет-магазин под ключ с headless-фронтом на Nuxt и подключением эквайринга или СДЭК - от 80 000 ₽ за базовую комплектацию.

Если задача проще - витрина без сложной логики каталога и без личного кабинета, - иногда дешевле и быстрее закрыть её на WordPress (от 60 000 ₽) или на Tilda (от 30 000 ₽) с докручиванием кастомных скриптов под задачу. Разработка полноценного SPA или SaaS на Vue 3 такими способами не заменяется, но не каждому проекту она и нужна. Если сомневаетесь, какой вариант закроет именно вашу задачу, беру консультацию от 3 000 ₽ - за один созвон разбираем стек под конкретный проект ещё до старта работ. Точный расчёт под вашу задачу и список того, что входит в разные варианты фронтенда, я расписываю на странице услуг веб-разработки.

Ошибки при выборе между Vue 3 и Nuxt

Ставят Nuxt на внутреннюю CRM-панель «на всякий случай, вдруг понадобится SEO» - и потом расплачиваются лишним слоем конвенций, более долгим деплоем и необходимостью думать о разнице кода на клиенте и сервере там, где эта разница вообще не имела значения.

Делают лендинг под рекламную кампанию на голом Vue 3 SPA - и через две недели удивляются, почему страница не индексируется и не участвует в органической выдаче, хотя внешне всё выглядит готово.

Игнорируют интеграции на этапе выбора стека. Если рядом с сайтом уже крутится Telegram-бот на aiogram, дёргающий API за статусами заказов, или сценарии в n8n, которым нужен стабильный вебхук-эндпоинт, серверные роуты Nuxt закрывают эту часть без отдельного бэкенд-сервиса - и это ощутимо экономит бюджет клиента на инфраструктуре и поддержке.

Интерфейс аналитики и отчётов

Дашборд / BI

от 90 000 ₽

Подробнее →

Частые вопросы

Можно ли начать на Vue 3 и потом перейти на Nuxt?

Да, и на практике это не переписывание с нуля. Компоненты, composables и большая часть бизнес-логики переносятся почти без правок, меняются в основном роутинг, точка входа и структура папок под конвенции Nuxt. На проектах без явных костылей такой перенос занимал у меня 3-5 дней.

Nuxt работает медленнее, чем Vue 3, из-за SSR?

Сам рендер на сервере занимает миллисекунды, но первый ответ сервера действительно чуть дольше, чем отдача готовой статики. При этом ощущаемая скорость обычно выше у Nuxt: пользователь видит готовый HTML сразу, без паузы на пустом экране, которая есть у SPA до момента гидратации.

Подходит ли Nuxt для Telegram-бота?

Сам бот - это отдельный процесс на Node или Python, например на aiogram, и Nuxt тут ни при чём. Но если у бота есть веб-админка со статистикой или нужен эндпоинт для вебхука от платёжной системы, эту часть удобно собрать на Nuxt, а бота оставить отдельным сервисом, который обращается к общему API.

Что выбрать для интернет-магазина: Nuxt или готовое решение на Tilda и WordPress?

Если каталог небольшой и не нужен нестандартный функционал, дешевле и быстрее закрыть витрину на WordPress с WooCommerce или на Tilda с доработками под задачу. Nuxt оправдан, когда нужен headless-фронт поверх существующей CRM или 1С, свой чекаут с эквайрингом и скорость загрузки напрямую влияет на конверсию.

Есть задача?

Обсудим в мессенджере

Расскажите, что нужно сделать — отвечу в течение 4 часов в рабочее время. Первая консультация бесплатно.

Самозанятый Калинкин Н. А. · работаю с физлицами и юрлицами

Продолжая пользование настоящим сайтом Вы выражаете своё согласие на обработку Ваших персональных данных (файлов куки) с использованием Yandex.Metrika.
Понятно