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

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

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. Быть аккуратнее с папками, так как может начать ругаться на отсутствие пустых папок

Ресурсы

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