Nuxt.js: Фреймворк для фреймворка Vue.js

image


Цитата с официального сайта:


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 dev

2) Руками с нуля


Создадим папку для проекта и в ней файл 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

Подводные камни


  1. Проверяйте правильность написание кода, особенно в файле конфигурации, так как если он его посчитает битым, то он его просто не будет обрабатывать и не выведет ни каких ошибок.
  2. Быть аккуратнее с папками, так как может начать ругаться на отсутствие пустых папок

Ресурсы


Официальный сайт
Русскоязычный гайд и документация (Перевод не полный)

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 24

    +7
    Ни статья, ни доки по ссылкам не отвечают на вопрос, какую конкретно задачу призван решать сей инструмент. Просто констатируется, мол, мы сделали новый фреймворк, объяснять некогда, пиши в консоли нпм инсталл бла-бла… А зачем? Что он добавляет к обычному Vue? Непонятно.
      +1
      Nuxt рендерить UI на сервере и генерировать статические сайты с помощью Node.js. Мы просто берем прелести Node и добавляем из к Vue
        +3
        И зачем это делать если есть php\python\ruby?
          +1
          Чтобы можно было делать SPA приложения с серверным рендерингом, я полагаю. Таким образом мы получаем модный ныне роутинг на клиенте + все возможности для SEO оптимизации.
          Уж не знаю, как этот Nuxt… Но NextJS, помимо серверного рендеринга, привносит с собой огромное количество плюшек, взять хотя бы динамическое импортирование компонентов, разбивку страниц по отдельным бандлам и прочее.
            0
            В Nuxt также, и не секрет что Nuxt = NextJS — React + Vue. Очем сказано на самом сайте Nuxt nuxtjs.org/guide
            The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. Few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born.
              +3
              Получается мне нужно будет поддерживать 2 бекенд сервера для этого — next.js(nuxt) + сервер где крутится вся логика, и куда будут ходить запросы через API?

              Я не против js фреймворков и даже сам использую react\angular 2+ в своих проектах, но как мне кажется сейчас придумывают фреймворк не что бы решать проблему а что бы создать новую проблему которую и решают этим самым фреймворком.
                0
                Я может быть не дошел еще до каких-то сложных приложений (и это действительно так), но если взять те, что я делаю сейчас, какой-то сложной логики в сервере для рендеринга нет. Но вообще да, похоже, что именно так.
                  0
                  Это не совсем так. Проблема существует давно, с тех пор как интеркативный js захотелось отдавать в google и остальным роботам, которые не умеют в js. Есть множество способов решения данной проблемы:
                  1. Начиналось все с извращений типа двух вариантов страниц для кравлера и пользователя, это просто за гранью добра и зла, создавать все по два раза.
                  2. Потом придумали пререндерить все это на сервере с помощью selenium/phantomjs и других. В этом также есть огромное кол-во подводных камней. Лично для меня главный из них это необходимость вести двойную разработку, сначала делаем фичу, потом учим эту фичу работать с серверным рендером. Бывает это не так сложно, но всегда нужно помнить про лишний слой разработки, который не нужен конечному пользователю, но необходим кравлерам. Помимо прочего все сильно усложняется на проектах где может быть 100 000+ страниц.
                  3. Со временем к этому подтянулись и frontend фреймворки. Сейчас и Angular, и React, и Vue поддерживают серверный рендеринг. И это сильно упрощает работу в целом, программист просто пишет код, а он просто рендерится на сервере, как будто это обычные шаблоны jsp или php.

                  Думаю не стоит объяснять насколько больше оверхеда в первых двух вариантах по сравнениею с третьим.

                  Так вот Nuxt не придумывает ничего, он просто за вас настраивает серверный рендеринг по гайдам Vue и добавляет парочку полезных плюшек. Поддерживать его сервер не составляет никакого труда. Если вся логика будет у вас на api сервере, то все что будет делать front server — это отдача статики.

                  Опять же он решает конкретную проблему, которая существует очень давно. Если вам необходимо интерактивное приложение, которое смогут «увидеть» кравлеры, то Nuxt вам в это поможет. Если в этом нет необходимости, то просто проходите мимо, этот инструмент не для вас.
                0

                Затем же, зачем пользоваться ruby, когда есть python/php

            0
            Хорошая штука, пока в продакшене ещё не использовали, но на стабильную уже планируем.
              +1

              Статья действительно пустая. Добавлю от себя)
              В готовящейся сейчас к выходу версии 1.0 есть много полезных модулей, включая поддержку PWA с zero-configuration. Также nuxt можно использовать в режиме SPA — т.е. без сервер-сайд рендеринга. В целом эта штука предоставляет неплохо настроенный сетап, с работающим из коробки vuex, роутером и без необходимости ковырять вебпак (хотя у vue-cli есть темплейты с готовыми конфигами вебпака)

              +1
              Я так понимаю огромное количество пакетов и «технологий» придумали программисты с почасовой оплатой труда.
              Зачем делать проект три месяца самому или в паре с дизайнером,
              если можно делать год в составе команды из 12 человек?
                +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. Хотя и без них прожить можно. Особенно если вы уверены что вам точно не потребуется серверный рендеринг.
                  0
                  Классно расписали, информативней чем в статье.
                  Сразу уж вопрос задам, а разве при необходимости нельзя использовать плюшки Vue? Раз это надстройка, то можно и более низкоуровневые штуки использовать, а тот же самый Vue славится тем, что можно много где и чистый JS использовать без ущерба всему остальному
                    0
                    Этим мне и понравился Nuxt. У Vue замечательные гайды, в том числе по ssr, и Nuxt полностью им следуют. В первую очередь я его рассматриваю как один из готовых vue-cli темплейтов (хоть это и не так), в котором тебе не требуется заного настраивать ssr по всем канонам в каждом новом проекте. Сам Nuxt активно использует все возможности Vue, практически не добавляя магии. Разработка идет так же на чистом js и это мне нравится больше всего, особенно после перехода с Angular.
                      0
                      Аааа, я не правильно понял, подумал, что вам не хватает плюшек «чистого Vue.js» во Vuex. В любом случае, ваш ответ ещё больше раскрыл тему. Спасибо!

                      Раз уж вы в теме vue. Приходилось ли пользоваться Vuex? Если да, то он как то стыкуется с Nuxt?
                        0
                        Запутался в названиях) Не Vuex, а Weex (который Vue React native)
                          0
                          Вот с этим к сожалению пока нет опыта, работа идет в основном в направлении сложных интерактивных админок или аппов, поэтому тему мобильных приложений мы еще не поднимали.
                    0

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

                      0
                      Не могли бы пару слов подробнее? Активно использую nuxt, предполагаю в продакшн как universal. Косяков с конфигурацией, описанных в статье — не наблюдаю (может правда это я аккуратный). Глянул issues на github, там половина вопросы…

                      Более того, сама документация Vue советует использовать Nuxt.js.
                        +1
                        Очень мило, по ссылке — js-майнер грузящий проц на 100% пока вы любуетесь цифрой 0.
                        0
                        «можно прикрутить хоть к express хоть к koa»
                        вот очень интересно посмотреть пример вменяемого прикручивания nuxt к koa!

                        Only users with full accounts can post comments. Log in, please.