「Hello nuxt!!」を読みました

技術書典04で購入した、Hello Nuxt!!: Vue.jsのサーバサイドレンダリングフレームワークを読みました。

cf. 技術書典4で出展してきました #技術書典 - チラシ裏日記上等!!新館

TOC

はじめに

  • ユニバーサルアプリケーションって実行環境に依存しない≒PCでもスマートフォンでも動くアプリのことだったのでは…
  • Nuxt.jsは静的ファイルジェネレータとしても使用できる

02: Nuxt.jsのはじめ方

  • .vueファイル
  • vue init nuxt-community/starter-template <dir>

03: ディレクトリ構成と役割

  • pagesディレクトリはビューとルーティングに関する役割を負う
  • pagesに配置されるvueファイルに、Nuxt.jsによって独自に追加された属性について
  • 動的なルーティングの機能によってpagesディレクトリの構成から自動でrouter.jsが生成される
  • componentsディレクトリ以下は、純粋なvueコンポーネント
  • layoutsディレクト
    • デフォルトレイアウト、エラーページ、カスタムレイアウト
    • カスタムレイアウトを使用するページで、layout名を指定する
  • pluginディレクトリには、インスタンス化時に実行されるコードを記述。初期化コードなど
  • middlewareディレクトリには、レンダリング前に実施されるコードを記述。ページコンポーネントのmiddlewareに指定すると実行される。サーバサイドで実行される点に注意
  • store, assets, staticについては省略

04: ページコンポーネント

  • コンテキストは以下に渡される
    1. asyncDataメソッドの第1引数
    2. fetchメソッドの第1引数
    3. layoutをメソッドとして実行したときの第1引数
    4. ミドルウェアとして定義した関数の第1引数
  • asyncData内で取得したデータは、コンポーネントのdataとマージできる
    1. Promiseを返す
    2. async/awaitで結果を取得してリターン
    3. callbackに渡す
  • fetchはデータをストアに入れる
  • headはheadタグを設定する
  • layoutは文字列で指定する。関数を定義して動的にレイアウトを選択することもできる
  • middlewareはファイル名を文字列か文字列の配列で指定する

05: コマンド

コマンドについては割愛

おわりに

Nuxt.jsには本書では書くことができなかったさまざまな応用法が用意されている。公式ガイドを閲覧しステップアップをはかろう

総括

本日同時に読んだNuxt tech bookと比較すると、より公式ガイドの記述に沿った内容になっていて、特にページコンポーネントの理解を助けるものになっていました。コンテキストの内容やfetchとasyncDataの違いなど、公式ガイドをさらっと見ただけではよくわからないところがあったので助かりました。
あと、Nuxt tech bookとはvue-cliのテンプレート名が違った。こちらのほうが公式ガイドに乗っている名前なので、これがいいのかな。

以上です

素晴らしい本をありがとうございます。