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

Просмотров 663
Сложность:

Nuxt.js - это фронтенд javascript фреймворк поверх другого фреймворка Vue.js. Он из коробки решает типичные задачи, которые требуются для небольших и средних проектов. В первую очередь, это server side rendering. То есть приложения на Nuxt.js полноценно индексируются поисковыми системами, так как они рендерятся на стороне сервера на фронт уже приходит готовый HTML. Данные, которые получены через запросы к базе данных также корректно отображаются в коде страницы. Единственное условие - выполнить эти запросы через asyncData или async Fetch.

Nuxt.js может работать не только в SSR режиме, но и как SPA или генератор статических сайтов. Получается 3 в 1. Для небольшого проекта, который не будет регулярно меняться нет смысла использовать VPS и прикручивать бэкенд. Достаточно сгенерировать файлы и закинуть на любой статический хостинг.

В Nuxt.js есть интегрированные и предварительно настроенные webpack и babel, которые в момент сборки преобразуют ваш проект в корректные и оптимизированные js и css файлы. Есть hot-reload при разработке на основе nodemon.

Сильным отличием от голого Vue является стандартная структура проекта. Есть папки pages, assets, layouts, static, plugins и так далее. Получается, что Nuxt.js навязывает типовую архитектуру проектов, что помогает упростить вхождение разработчика на новые проекты.

Одним из самых дискуссионных моментов является папка pages. Nuxt.js предлагает использовать файловый routing, который он при сборке преобразует в классический Vue routing. Для опытных разработчиков это раздражительный момент, так как они понимают, что на крупном или нестандартном проекте это может усложнить работу. По сути, файлы внутри папки page являются обычными компонентами. Файлы и папки с подчёркиванием в начале названия (например, _id.vue) являются шаблоном для вставки динамических ресурсов.

В Nuxt.js встроена библиотека глобального состояния Vuex. Причём можно её использовать специфичным образом. Например, через nuxtServerInit можно на раннем этапе загрузки приложения сделать запрос к серверу и сохранить ответ в сторе. При выводе этих данных на фронт они будут отображаться в коде, то есть нормально индексироваться поисковыми системами.

Я воспринимаю Nuxt.js, как более простой и удобный способ работать с Vue для небольших и средних сайтов. Множество известных компаний и проектов используют Nuxt.js. Примеры есть в отдельной статье. Любой более или менее опытный разработчик быстро разберется с созданием приложений на Nuxt.js. Это одна из причин популярности фреймворка. Естественно, скорость работы и функциональность также являются важными причинами в сторону выбора Nuxt.js.

Автор: Александр Дергунов
Дата публикации: 17.3.2021 г.
Поделиться:

Простое Nuxt.js приложение

Оптимизация Nuxt.js приложения
4662 просмотров4662
Простое Nuxt.js приложение
Пользуемся преимуществами современных javascript фреймворков.
Сложность:
Что такое Nuxt.js?
664 просмотров664
Простое Nuxt.js приложение
Описание javascript фреймворка Nuxt.js.
Сложность:
Установка Nuxt.js и подготовка IDE
723 просмотров723
Простое Nuxt.js приложение
Устанавливаем нужное ПО и плагины, загружаем проект с Github.
Сложность:
Режимы работы Nuxt.js
736 просмотров736
Простое Nuxt.js приложение
Отдельный процесс и middleware для Express.js.
Сложность:
Структура Nuxt.js приложения
809 просмотров809
Простое Nuxt.js приложение
Типовые папки и файлы, разделение функциональности.
Сложность:
Структура Nuxt.js приложения - видео
Бэкенд Express + Mongoose
723 просмотров723
Простое Nuxt.js приложение
Реализация бэкенда для Nuxt приложения
Сложность:
Шаблоны и страницы
422 просмотров422
Простое Nuxt.js приложение
Для чего они нужны? Какие между ними отличия.
Сложность:
Vue компоненты
931 просмотров931
Простое Nuxt.js приложение
Примеры использования в Nuxt.js
Сложность:
Главная страница энциклопедии
metrika