DIGITAL.ERA

Nuxt 3

Алексей Добрый -

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

Чтобы понять что такое Nuxt, разберемся что необходимо для современного приложения:

  • JavaScript фреймворк, для "реактивности" и использования веб-компонентов, в Nuxt это Vue.js
  • Сборщик поддерживающий горячую перезагрузку в режиме разработки, и сборщик кода для упаковки и оптимизации кода приложения. Nuxt поддерживает два подхода webpack 5 и Vite.
  • Преобразователь кода, чтобы использовать самый современный синтаксис JavaScript, при этом поддерживать устаревшие браузеры. В Nuxt используется esbuild.
  • Сервер для работы приложения в режиме разработки, который также будет поддерживать SSR (server side rendering) приложения или маршрутизацию API.  В Nuxt это h3, чтобы обеспечить универсальность, будь то serevrless технологии, workers, Node.js или высокая производительность.
  • Библиотека маршрутизации на стороне клиента.  В Nuxt это vue-router.

И так  это основные концепции, и это только верхушка айсберга. Представьте, что все это установлено и настроено в вашем проекте, работает и поддерживается в течение времени.  Команда Nuxt делает это с октября 2016 года, оттачивает конфигурацию для предоставления лучшей оптимизации и производительности для Vue приложений.

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

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

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

Режим отрисовки

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

  • Универсальный (Отрисовка на сервере и наполнение (ssr and hydration))
  • Только на стороне клиента
  • Генерация статичных страниц
  • Гибридный (кеширование на маршрутах)

Сервер

Nuxt использует Nitro.

В разработке, он использует Rollup и Node.js исполнители для серверного кода и изоляции контекста. Также создается API, через чтение файлов в директории  server/api и erver/middleare.

В рабочем режиме, Nitro собирает сервер и приложение в одной универсальной директории .output. Это оптимизировая, минифицированная, минимальная версия приложения, из которой так же удалены все node_modules (исключая только polyfills). Можно развернуть эту в любой системе поддерживающей JavaScript.

Архитектура

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

  • Ядро nuxt
  • Сборщики @nuxt/vite-builder, @nuxt/webapck-builder
  • Командная строка nuxi
  • Сервер nitro
  • Набор разработки @nuxt/kit
  • Мост для Nuxt2 @nuxt/bridge

Nuxt отличная основа для Vue.js проекта.