先日Vue.jsで遊んでみたので、今回はNuxt.jsに触れてみます。
まったくの知識ゼロからサーバーサイドレンダリングを試します。
Contents
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をインストール
1 | npm install -g vue-cli |
入りました。
確認。
1 2 | $ vue --version 2.9.6 |
バージョン2.9.6！
スターターテンプレートを使ってみる
スターターテンプレートが公式で用意されているので試してみます。
インストール
1 | $ vue init nuxt-community/starter-template <project-name> |
vue-cli を使ってインストールしますが、zipファイルダウンロードしてきても大丈夫です。
依存するパッケージをインストール
インストールしたディレクトリに移動して
依存するパッケージをインストールします。
1 2 | $ cd <project-name> $ npm install |
プロジェクトを起動
プロジェクトを起動します！
1 | $ npm run dev |
http://localhost:3000 で起動したのでアクセスしてみましょう。
ホストとポートを指定したい場合については公式に書いてました。
ホストとポート番号 – Nuxt.js
開きました！
感想とまとめ
ディレクトリ構造の説明だけ読めばあとは本当にわかりやすい。
ルーティングとか自動か…！
動的な場合も含め本当に簡単。
