Nuxt.js
https://gyazo.com/6150ffb56501de90c7af722db3c19850
ディレクトリ構造をデフォルトで決めてくれている
vue-routerを用いてページをルーティング
名前もめちゃくちゃ似ているので注意。
プロパティの説明、ファイル構造、基本的な nuxt.config.js の設定例
ディレクトリ構造
ディレクトリエイリアス
Nuxt Appにおいて ~ あるいは @ はソースが格納されるディレクトリ(srcDir) を示す
~~, @@ はrootDir
nuxt.config.js の設定
ページ間の遷移は <router-link> ではなく <nuxt-link> を使う
URLにパラメータを含める場合はファイル名にアンダースコアをつける
asyncDataとコンテキストについて
コンポーネントの asyncData プロパティ(メソッド)は、ページのロードとは非同期的なデータの読み込みのために用いる。
asyncDataが呼ばれるたびに、その結果がdataにマージされる
サーバサイドでは、ページがリクエストされた際に一度だけ呼ばれる
クライアントサイドでは、ページ遷移のたびに呼ばれる
asyncDataは this を使えない
コンポーネントがinstanciateされる前に、別のスコープで(非同期に)呼び出されるため
代わりに引数の context を介して必要なデータを取得できる
それぞれ機能別に、Vue.js と Nuxt.js へのドキュメントリンクを示してくれている
まずはガイド
スタイルガイド
Nuxt を使うメリットについて
デフォルトで必須級のライブラリが入っている、プラグインにより使いやすくなっている
ライブラリ初期化のコードが必要ない
ライブラリが最初から入っているのは上記の通りだけど、Nuxt.jsはvue-routerとvuex使うための初期化コードを各必要がない。