Введение

25 октября 2016 команда zeit.co анонсировала Next.js, фреймворк для приложений на React с серверным рендерингом. Через несколько часов после этого объявления родился Nuxt.js — воплощение аналогичной идеи для Vue.js.

Что такое Nuxt.js?

Nuxt.js — это фреймворк для универсальных приложений на Vue.js.

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

Наша цель — создать фреймворк настолько гибкий, чтобы его можно было использовать и как основу, и как дополнение к уже существующим проектам на Node.js.

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

Кроме того, мы также предоставляем другую опцию разработки: nuxt generate. С помощью неё можно статически генерировать приложения на Vue.js. На наш взгляд, эта опция может оказаться следующим большим шагом на пути разработки микросервисных веб-приложений.

Как фреймворк, Nuxt.js привносит множество возможностей, помогающих разработке, таких как: асинхронные данные, middleware, шаблоны и др.

Как это работает

Vue с Webpack и Babel

Nuxt.js использует следующие элементы для создания современных веб-приложений:

Общий размер составляет всего лишь 28kb min+gzip (31kb при использовании vuex).

Под капотом мы используем Webpack с vue-loader и babel-loader для сборки, разделения и минимизации кода.

Возможности

  • Написание Vue-файлов
  • Автоматическое разделение кода
  • Серверный рендеринг
  • Мощная система маршрутизации с асинхронными данными
  • Обслуживание статических файлов
  • Транспиляция ES6/ES7
  • Сборка и минимизация JS & CSS
  • Управление элементами в блоке head
  • Горячая замена модулей при разработке
  • Интеграция c ESLint
  • Пре-процессоры: SASS, LESS, Stylus, и др.

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

Nuxt.js можно использовать как фреймворк для организации всех этапов рендеринга UI в вашем проекте.

Выполнение команды nuxt запускает сервер разработки, поддерживающий горячую замену модулей и полностью сконфигурированный серверный рендеринг вашего приложения.

Взгляните на документацию имеющихся команд, чтобы узнать больше.

Если же сервер у вас уже есть, Nuxt.js можно включить как middleware — ограничений нет никаких. См. руководство по программному использованию Nuxt.js.

Статическая генерация

Большая инновация Nuxt.js скрыта в команде nuxt generate.

Эта команда генерирует HTML-представление для каждого маршрута и сохраняет их в соответствующие файлы.

Пример:

-| pages/
----| about.vue
----| index.vue

Будет сгенерировано:

-| dist/
----| about/
------| index.html
----| index.html

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

Сам данный сайт, сгенерированный статически и размещённый на GitHub Pages, является отличным примером этого подхода:

Генерировать HTML вручную при каждом обновлении репозитория документации мы, разумеется, не хотим, так что каждый пуш вызывает лямбда-функцию AWS, которая:

  1. Клонирует репозиторий nuxtjs.org
  2. Устанавливает зависимости через npm install
  3. Вызывает nuxt generate
  4. Пушит получившуюся папку dist в ветку gh-pages

Таким образом, у нас теперь есть безсерверное статически-генерируемое веб-приложение :)

Неудержимая мысль влечёт нас дальше: представьте интернет-магазин, созданный посредством nuxt generate и размещённый на CDN. Каждый раз, когда товар заканчивается на складе, мы регенерируем приложение, но если во время этого процесса кто-то использует наше приложение — всё будет актуально благодаря запросам к API интернет-магазина. Больше нет нужды во множественных серверах и кешировании!

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!