Цитата с официального сайта:
25 октября 2016 команда zeit.co анонсировала Next.js, фреймворк для приложений на React с серверным рендерингом. Через несколько часов после этого объявления родился Nuxt.js — воплощение аналогичной идеи для Vue.js.
Nuxt.js — это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты.
В нем используется:
- Vue 2
- Vuex
- Vue-Router
- Vue-Meta
- vue-loader
- babel-loader
- Webpack
Hello world Nuxt.js
Создать первое универсальное приложение двумя способами:
1) С помощью шаблона из vue-cli
Если не установлен vue-cli то устанавливаем
npm install -g vue-cliТеперь создаем проект по готовому шаблону
vue init nuxt-community/starter-template И запускаем
npm run dev2) Руками с нуля
Создадим папку для проекта и в ней файл package.json
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}Здесь мы указали как мы будем запускать приложение. Далее устанавливаем сам Nuxt.js
npm install --save nuxtПосле того как все установилось в папке нашего проекта создаем папку pages. В ней будут храниться наши страницы сайта с расширением .vue. После запуска, Nuxt все их преобразовывает в маршруты приложения. Создадим index.vue
<template>
<h1>Привет Nuxt.js!</h1>
</template>Как видно Nuxt использует туже шаблонизацию что и Vue. И теперь запустим наше приложение.
npm run devОно доступно по адресу http://localhost:3000/
Блэкджек и конфиг
Также в Nuxt есть свои обязательные папки и файл конфигурации nuxt.config.js. В нем можно настроить заголовки сайта, подключить глобальные CSS, включить кэширование и многое другое.
Список папок:
- assets — Исходные файлы SASS, LESS или JS
- components — Компоненты приложения, например описание preloader'a
- layouts — Шаблоны, например страница об ошибке
- middleware — Позволяет определять пользовательские функции, которые могут быть запущены до отображения страницы или группы страниц (layouts).
- pages — Представления(наши страницы) и по тому как они распложены в этой папке он строит маршруты
- plugins — Плагины
- static — Статические файлы, например robots.txt
- store — Хранилище Vuex
Подводные камни
- Проверяйте правильность написание кода, особенно в файле конфигурации, так как если он его посчитает битым, то он его просто не будет обрабатывать и не выведет ни каких ошибок.
- Быть аккуратнее с папками, так как может начать ругаться на отсутствие пустых папок
Ресурсы
Официальный сайт
Русскоязычный гайд и документация (Перевод не полный)
Комментарии (22)
Fractalzombie
01.09.2017 16:14Хорошая штука, пока в продакшене ещё не использовали, но на стабильную уже планируем.
Darkside73
01.09.2017 17:41+1Статья действительно пустая. Добавлю от себя)
В готовящейся сейчас к выходу версии 1.0 есть много полезных модулей, включая поддержку PWA с zero-configuration. Также nuxt можно использовать в режиме SPA — т.е. без сервер-сайд рендеринга. В целом эта штука предоставляет неплохо настроенный сетап, с работающим из коробки vuex, роутером и без необходимости ковырять вебпак (хотя у vue-cli есть темплейты с готовыми конфигами вебпака)
kanarisru
02.09.2017 04:45+1Я так понимаю огромное количество пакетов и «технологий» придумали программисты с почасовой оплатой труда.
Зачем делать проект три месяца самому или в паре с дизайнером,
если можно делать год в составе команды из 12 человек?
ilovetwins
02.09.2017 04:45+1Фактически все что реализует Nuxt.js можно реализовать на Vue.js, серверный рендеринг у них очень продуман. Но Nuxt.js позволяет получить все это из коробки:
1.Браузер/Google и все остальные получают готовый статичный html, в котором все данные уже загружены и отренедерены. После загрузки страницы сайт ведет себя дальше как SPA.
2. Уже сконфигурированный webpack. Бандлы для вендоров, приложения и отдельных страниц, загружаемых через prefetch
3. Простой роутинг на базе структуры папок и файлов.
4. Набор модулей типа pwa, axios, firebase, в которых многое сделано за вас: github.com/nuxt-community/modules
Уточню в чем конкретное отличие от рендеринга php/python/ruby/etc. Единая кодовая база, не нужно писать какой-то отдельный рендер для SPA или интерактивных сайтов, не нужно придумывать отдельно серверные шаблоны и отдельно js шаблоны для интерактива, чтобы как-то пофиксить SEO. Это просто работает. И самое главное не только для гугла, ведь не всем нужен SEO для SPA. Это работает везде. Можно шарить в google+ и facebook и это будет работать без каких-либо телодвижений.
Еще более важное уточнение для скептиков js. Это не замена вашего backend. По сути это прослойка между backend и frontend. Nuxt.js можно прикрутить напрямую к express/koa и другим node фреймворкам, либо запрашивать данные из любого другого бекенда.
Пример как это работает в реальной жизни:
1. api сервер на php, авторизует юзеров, выдает данные и т.д.
2. front сервер на express+nuxt.js запрашиват данные из api сервера, рендерит страницы, отдает пользователю.
Сделав 2 проекта на Nuxt.js, очень нехватает его плюшек на чистом Vue.js. Хотя и без них прожить можно. Особенно если вы уверены что вам точно не потребуется серверный рендеринг.Hellek
02.09.2017 18:00Классно расписали, информативней чем в статье.
Сразу уж вопрос задам, а разве при необходимости нельзя использовать плюшки Vue? Раз это надстройка, то можно и более низкоуровневые штуки использовать, а тот же самый Vue славится тем, что можно много где и чистый JS использовать без ущерба всему остальномуilovetwins
02.09.2017 22:48Этим мне и понравился Nuxt. У Vue замечательные гайды, в том числе по ssr, и Nuxt полностью им следуют. В первую очередь я его рассматриваю как один из готовых vue-cli темплейтов (хоть это и не так), в котором тебе не требуется заного настраивать ssr по всем канонам в каждом новом проекте. Сам Nuxt активно использует все возможности Vue, практически не добавляя магии. Разработка идет так же на чистом js и это мне нравится больше всего, особенно после перехода с Angular.
Hellek
03.09.2017 02:57Аааа, я не правильно понял, подумал, что вам не хватает плюшек «чистого Vue.js» во Vuex. В любом случае, ваш ответ ещё больше раскрыл тему. Спасибо!
Раз уж вы в теме vue. Приходилось ли пользоваться Vuex? Если да, то он как то стыкуется с Nuxt?
Hellek
03.09.2017 03:26Запутался в названиях) Не Vuex, а Weex (который Vue React native)
ilovetwins
03.09.2017 12:30Вот с этим к сожалению пока нет опыта, работа идет в основном в направлении сложных интерактивных админок или аппов, поэтому тему мобильных приложений мы еще не поднимали.
s77lanselot77s
02.09.2017 04:45Nuxt пока сыроват для продакшен. Если нужен SSR на vue лучше воспользоваться гайдом
S_A
04.09.2017 09:51Не могли бы пару слов подробнее? Активно использую nuxt, предполагаю в продакшн как universal. Косяков с конфигурацией, описанных в статье — не наблюдаю (может правда это я аккуратный). Глянул issues на github, там половина вопросы…
Более того, сама документация Vue советует использовать Nuxt.js.
dom1n1k
Ни статья, ни доки по ссылкам не отвечают на вопрос, какую конкретно задачу призван решать сей инструмент. Просто констатируется, мол, мы сделали новый фреймворк, объяснять некогда, пиши в консоли нпм инсталл бла-бла… А зачем? Что он добавляет к обычному Vue? Непонятно.
MarkIkon Автор
Nuxt рендерить UI на сервере и генерировать статические сайты с помощью Node.js. Мы просто берем прелести Node и добавляем из к Vue
avdept
И зачем это делать если есть php\python\ruby?
theWaR_13
Чтобы можно было делать SPA приложения с серверным рендерингом, я полагаю. Таким образом мы получаем модный ныне роутинг на клиенте + все возможности для SEO оптимизации.
Уж не знаю, как этот Nuxt… Но NextJS, помимо серверного рендеринга, привносит с собой огромное количество плюшек, взять хотя бы динамическое импортирование компонентов, разбивку страниц по отдельным бандлам и прочее.
walkman7
В Nuxt также, и не секрет что Nuxt = NextJS — React + Vue. Очем сказано на самом сайте Nuxt nuxtjs.org/guide
avdept
Получается мне нужно будет поддерживать 2 бекенд сервера для этого — next.js(nuxt) + сервер где крутится вся логика, и куда будут ходить запросы через API?
Я не против js фреймворков и даже сам использую react\angular 2+ в своих проектах, но как мне кажется сейчас придумывают фреймворк не что бы решать проблему а что бы создать новую проблему которую и решают этим самым фреймворком.
theWaR_13
Я может быть не дошел еще до каких-то сложных приложений (и это действительно так), но если взять те, что я делаю сейчас, какой-то сложной логики в сервере для рендеринга нет. Но вообще да, похоже, что именно так.
ilovetwins
Это не совсем так. Проблема существует давно, с тех пор как интеркативный js захотелось отдавать в google и остальным роботам, которые не умеют в js. Есть множество способов решения данной проблемы:
1. Начиналось все с извращений типа двух вариантов страниц для кравлера и пользователя, это просто за гранью добра и зла, создавать все по два раза.
2. Потом придумали пререндерить все это на сервере с помощью selenium/phantomjs и других. В этом также есть огромное кол-во подводных камней. Лично для меня главный из них это необходимость вести двойную разработку, сначала делаем фичу, потом учим эту фичу работать с серверным рендером. Бывает это не так сложно, но всегда нужно помнить про лишний слой разработки, который не нужен конечному пользователю, но необходим кравлерам. Помимо прочего все сильно усложняется на проектах где может быть 100 000+ страниц.
3. Со временем к этому подтянулись и frontend фреймворки. Сейчас и Angular, и React, и Vue поддерживают серверный рендеринг. И это сильно упрощает работу в целом, программист просто пишет код, а он просто рендерится на сервере, как будто это обычные шаблоны jsp или php.
Думаю не стоит объяснять насколько больше оверхеда в первых двух вариантах по сравнениею с третьим.
Так вот Nuxt не придумывает ничего, он просто за вас настраивает серверный рендеринг по гайдам Vue и добавляет парочку полезных плюшек. Поддерживать его сервер не составляет никакого труда. Если вся логика будет у вас на api сервере, то все что будет делать front server — это отдача статики.
Опять же он решает конкретную проблему, которая существует очень давно. Если вам необходимо интерактивное приложение, которое смогут «увидеть» кравлеры, то Nuxt вам в это поможет. Если в этом нет необходимости, то просто проходите мимо, этот инструмент не для вас.
justboris
Затем же, зачем пользоваться ruby, когда есть python/php