Введение

Цель Nuxt — сделать веб-разработку интуитивной и производительной с отличным Developer Experience.

Nuxt — бесплатный фреймворк с открытым исходным кодом для создания типобезопасных, производительных full-stack веб-приложений и сайтов на Vue.js.

Вы можете сразу начать писать .vue файлы, пользуясь hot module replacement в разработке и получая производительное приложение в production с серверным рендерингом по умолчанию.

Nuxt не привязывает к конкретному провайдеру — вы можете развернуть приложение где угодно, даже на edge.

Чтобы попробовать Nuxt в браузере, запустите его в нашем онлайн sandbox.

Автоматизация и соглашения

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

  • Файловая маршрутизация: маршруты определяются структурой директории app/pages/. Это упрощает организацию приложения и устраняет необходимость в ручной настройке маршрутов.
  • Разделение кода: Nuxt автоматически разбивает код на части, что снижает время первоначальной загрузки.
  • Серверный рендеринг из коробки: в Nuxt есть встроенный SSR, не нужна отдельная настройка сервера.
  • Автоимпорты: пишите композаблы и компоненты Vue в соответствующих директориях и используйте их без импорта, с преимуществами tree-shaking и оптимизированных бандлов.
  • Утилиты получения данных: Nuxt предоставляет композаблы для SSR-совместимого получения данных и разных стратегий.
  • TypeScript без конфигурации: пишите типобезопасный код с автоматически генерируемыми типами и tsconfig.json.
  • Настроенные сборщики: по умолчанию используется Vite для HMR в разработке и сборки production с best-practices.

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

Серверный рендеринг

Nuxt по умолчанию поддерживает серверный рендеринг (SSR) без необходимости настраивать сервер. Для веб-приложений это даёт:

  • Быструю начальную загрузку: Nuxt отправляет полностью отрендеренную HTML-страницу, которую можно сразу показать.
  • Улучшенный SEO: поисковики лучше индексируют SSR-страницы, так как HTML доступен сразу.
  • Лучшую работу на слабых устройствах: меньше JavaScript для загрузки и выполнения на клиенте.
  • Доступность: контент доступен при первой загрузке страницы.
  • Кэширование: страницы можно кэшировать на сервере.

Nuxt — гибкий фреймворк: вы можете статически отрендерить приложение через nuxt generate, отключить SSR глобально опцией ssr: false или использовать гибридный рендеринг через routeRules.

Узнать больше Режимы рендеринга Nuxt.

Серверный движок

Серверный движок Nuxt Nitro открывает новые возможности для full-stack.

В разработке Nitro использует Rollup и Node.js workers для изоляции контекста серверного кода. API генерируется из файлов в server/api/, middleware — из server/middleware/.

В production Nitro собирает приложение и сервер в единую директорию .output. Результат — лёгкий минифицированный бандл без лишних модулей Node.js. Развёртывание возможно на любой платформе с поддержкой JavaScript: Node.js, Serverless, Workers, Edge или статический хостинг.

Узнать больше Серверный движок Nuxt.

Готовность к production

Nuxt-приложение можно развернуть на Node или Deno, пререндерить для статического хостинга или использовать serverless и edge-провайдеров.

Узнать больше Раздел о развёртывании.

Модульность

Система модулей позволяет расширять Nuxt своими функциями и интеграциями со сторонними сервисами.

Узнать больше Концепция модулей Nuxt.

Архитектура

Nuxt состоит из основных пакетов:

Рекомендуется ознакомиться с каждым разделом, чтобы понять возможности Nuxt и области применения пакетов.