Что за Nuxt.js?

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

* Исполняется на серверной и клиентской сторонах (делать это сложно)

=

Зачем нужен Nuxt.js?

Зачем нужен SSR?

  • Даёт поисковым роботам распознавать SPA
  • Лучше time-to-content

С ним легко строить SPA* + SSR**
* Single-page application ** Server-side rendering

Минусы SSR

  • Сложнее настраивать и разворачивать
  • Большая нагрузка на сервер
  • Ограничения в разработке: не весь код может работать и на клиенте, и на сервере.

Фичи Nuxt.js

  • Можно делать SPA, универсальные приложения и  генерировать статичные сайты
  • В коробке все для production-ready приложения:
    плагины, конфиги, сборка.
  • Удобная структура папок
  • Мощный роутинг с Асинхронными данными
  • Сервировка статических файлов
  • Автоматический code-splitting
  • Автоматическое добавление preload/prefetch
  • Транспиляция ES2015+
  • Сборка и минификация JS & CSS
  • Hot-reload
  • Пре-процессоры: SASS, LESS, Stylus, и др.
  • Управление <head> (<title>, <meta> и др.)
  • Расширяемая модульная архитектура

Как работает Nuxt.js

Ресурсы

  1. Universal application code structure in Nuxt.js. Как работает nuxt: сборка, гидратация, жизненный цикл и все-все-все. С картинками + пример организации кода.

  2. Официальный сайт Nuxt.js
  3. Официальное руководство по SSR от авторов Vue. Поможет лучше понять, что происходит за кулисами
  4. Курс на udemy по nuxt: официальный/пиратский
  5. Мой шаблон nuxt-проекта. CSS-modules, inline svg import, eslint+prettier+husky+lint-staged, e2e & unit тесты, доки, рекомендации и другое.

По любым вопросам о nuxt или vue пиши в T: https://tele.gg/jorjeb.

Made with Slides.com