Nuxt.js

先日Vue.jsで遊んでみたので、今回はNuxt.jsに触れてみます。
まったくの知識ゼロからサーバーサイドレンダリングを試します。

あわせて読みたい
Vue.js入門-基礎を試しながら学んでみる【javascruptフレームワーク】
Vue.js入門-基礎を試しながら学んでみる【javascriptフレームワーク】
久々にjavascriptフレームワークで遊びます。 Vueは昔少し触ったことあるのですが、最近需要も多いようなのでゼロから試しながら学んでいきます。 バージョンは2.xです。 Vue.jsとは 使って体感したほうがいいし概要は...

Nuxt.jsとは?

Nuxt.js

Vue.jsで作られたフレームワーク

サーバーサイドレンダリングとかを簡単にできるらしい。
vueに集中して他はフレームワークにおまかせかんたん!

Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。
サーバサイドとクライアントサイドの違いを抽象化することで無視して、一貫した方法で UIレンダリングすること に焦点を当てています。
私たちのゴールは、あるプロジェクトの基礎として利用したり、あるいは既に進行中の Node.js ベースのプロジェクトに追加できる、柔軟なフレームワークを作成することです。
Nuxt.js は サーバーサイドレンダリング する Vue.js アプリケーションの開発をもっと楽しくするために必要な設定を、あらかじめセットしています。

Nuxt.jsの読み方

ナクストと読むらしいです。

Nuxt.jsでできること

Vue ファイルで記述できること
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES6/ES7 のトランスパイレーション
JS と CSS のバンドル及びミニファイ
Head 要素の管理
開発モードにおけるホットリローディング
SASS, LESS, Stylus などのプリプロセッサのサポート
HTTP/2 push headers ready
モジュール構造で拡張できること

SPAとSEO

シングルページアプリケーション(SPA)。
数年前にAngular使ってた時にはSEOどうしたらいいのか悩みました。
Googleがある程度はjs実行後のページを読めるとか言ってる情報もあるし。

結果的にはPhantomJSを使ったのですが。
PhantomJSでスクリーンショットをとるみたいな記事しかなくてけっこう大変でした。

それもありサーバーサイドレンダリング(SSR)を試してみたいなと。
今回はやってみます。

Nuxt.jsの準備

npmをインストール

vue-cliのインストールに必要なのでnpmを使えるようにしておきましょう。

vue-cliをインストール

入りました。

確認。

バージョン2.9.6!

スターターテンプレートを使ってみる

スターターテンプレートが公式で用意されているので試してみます。

インストール

vue-cli を使ってインストールしますが、zipファイルダウンロードしてきても大丈夫です。

依存するパッケージをインストール

インストールしたディレクトリに移動して
依存するパッケージをインストールします。

プロジェクトを起動

プロジェクトを起動します!

http://localhost:3000 で起動したのでアクセスしてみましょう。

ホストとポートを指定したい場合については公式に書いてました。
ホストとポート番号 – Nuxt.js

Nuxt js プロジェクト

開きました!

感想とまとめ

ディレクトリ構造の説明だけ読めばあとは本当にわかりやすい。

ルーティングとか自動か…!
動的な場合も含め本当に簡単。

この記事を書いた人

鳥井 慎太郎
鳥井 慎太郎
Web事業家/ブロガー
毎日楽しい。 個人開発(Webサービス、ゲームアプリ)