Nuxt.js 学習メモ（公式ドキュメントの雑な抜粋）

vue vuex nuxt

これは何か

Nuxt.js の公式ドキュメントを読んだときのメモです。
気になったところ、後でもう一度確認が必要そうなもの、など。
Nuxt.js のバージョンは v1.4.2。

Nuxt.js ガイド

プロローグ

f:id:ryotah:20180825174314p:plain

  • サーバーサイドレンダリング

    • nuxt コマンドを実行すると開発サーバーが起動されます。このサーバーはホットリローディング及び vue-server-render を備えており、vue-server-render は自動的にアプリケーションをサーバーサイドレンダリングするよう設定されています。

  • nuxt --spa
  • 静的ファイルの生成
    • （必要になったら読む）

はじめる

インストール

ディレクトリ構造

設定

  • nuxt.config.js
  • （必要になったら読む）

ルーティング

  • Nuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。

  • 動的なルーティング
    • users/_id.vue => /users/:id?, _slug => path: '/:slug',

    • user-id と名付けられたルートに :id? というパスがありますが、これはこの :id が必須ではないことを表します。もし必須にしたい場合は users/_id ディレクトリ内に index.vue ファイルを作成してください。

    • ルーティングのパラメータのバリデーション
<script>
  export default {
    validate ({ params }) {
      // 数値でなければならない
      return /^\d+$/.test(params.id)
    }
  }
</script>

ビュー

  • ドキュメント

    • HTML テンプレートを拡張するために、プロジェクトのルートディレクトリに app.html を作成します。

  • レイアウト
    • デフォルトレイアウト

      • layouts/default.vue ファイルを追加することでメインレイアウトを拡張できます。

      • 必ず コンポーネントを入れておくことを覚えておいてください。

    • エラーページ

      • layouts/error.vue ファイルを追加することでエラーページをカスタマイズできます。

      • <nuxt/> を含めてはならない

    • カスタムレイアウト

      • layouts ディレクトリの 第一階層 のファイルで、ページコンポーネント内の layout プロパティで指定できるカスタムレイアウトを作成できます。

      • pages/posts.vue ファイル内で、カスタムレイアウトを使うことを Nuxt.js に伝えます:

  • ページ
    • asyncData, fetch, head, layout, transition, scrollToTop, validate, middleware
  • HTML ヘッド

    • Nuxt.js は headers とアプリケーションの html attributes を更新するために vue-meta を使用しています。Nuxt.js はこれらのオプションで vue-meta を設定します:

    • Nuxt.jsでは、nuxt.config.js 内にデフォルトの タグを全て定義することができます。

非同期なデータ

  • Nuxt.js はコンポーネントのデータをセットする前に非同期の処理を行えるようにするために asyncData メソッドを追加しています。

  • asyncData メソッド
    • promise, async/await, callback のどれか

    • asyncData の結果はコンポーネントのデータと マージされ ます

  • コンテキスト
    • context 内で利用できるキーの一覧
    • 動的なルートデータへのアクセス

      • たとえば、動的ルートパラメータには、コンテキストオブジェクトを構成したファイルまたはフォルダの名前を使用してアクセスできます。 したがって、_slug.vue という名前のファイルを定義する場合、context.params.slug を介してアクセスできます。

    • クエリの変化のリスニング

      • デフォルトでは、クエリストリングの変化で asyncData メソッドは呼ばれません。ページネーションコンポーネントのビルド時などにこの振る舞いを変更したい場合は、ページコンポーネントの watchQuery プロパティを見るパラメータを設定することができます。

      • watchQuery プロパティ
  • エラー処理

    • Nuxt.js は、context に error (パラメータ）メソッドを追加し、エラーページを表示するためにそれを呼び出すことができます。

    • params.statusCode は、サーバーサイドから適切なステータスコードを表示するためにも使用されます。

    • callback({ statusCode: 404, message: 'ページが見つかりません' })
      • 第一引数を利用する

アセット

  • Webpack で取り扱う

    • デフォルトでは vue-loader は css-loader および vue-template-compiler を用いて、スタイルやテンプレートファイルを処理します。このコンパイル処理の中で、<img src="..."> や background: url(...) や CSS @import などのすべての URL はモジュールの依存関係のように解決されます。

  • Webpack で扱わない静的ファイル

プラグイン

  • Nuxt.js では js プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。

  • 外部パッケージの利用

    • こうすれば、バンドルファイルが膨れ上がることなく、どの場所にも import axios と書くことができます。

module.exports = {
  build: {
    vendor: ['axios']
  }
}

モジュール

  • モジュールは、Nuxt 起動時に順番に呼び出される、シンプルな関数です

  • Webpack の Tapable に基づいた Nuxt のモジュール設計のおかげで、モジュールは例えばビルドの初期化のような特定のエントリーポイントに、フックを簡単に登録できるのです。

  • 基本的なモジュールを書く
  • 非同期モジュール
  • 共通のスニペット
    • （後で読む）
  • 特定のフックでタスクを実行する

    • 単に Nuxt の初期化処理時だけではなく、特定の条件下でのみ、モジュールにある処理を実行させたいこともあるでしょう。

Vuex ストア

  • Nuxt.js は store ディレクトリを探索し存在するときには以下を実行します: 1. Vuex をインポートします 2. vuex モジュールを vendor のバンドルファイルに追加します 3. store オプションをルートの Vue インスタンスに追加し

  • クラシックモード

    • ストアをクラシックモードで有効にするには store/index.js ファイルを作成し、ストアインスタンスをエクスポートします:

  • モジュールモード

    • このオプションを使いたいときは、ストアインスタンスの代わりに、store/index.js 内でステート、ミューテーション、アクションをエクスポートします:

  • fetch メソッドは、ページがレンダリングされる前に、データをストアに入れるために使われます。

  • nuxtServerInit アクション

    • nuxtServerInit というアクションがストア内に定義されているときは、Nuxt.js はそれをコンテキストとともに呼び出します（ただしサーバーサイドに限ります）。サーバーサイドからクライアントサイドに直接渡したいデータがあるときに便利です。

    • コンテキストは、asyncDataや fetch メソッドと同様に nuxtServerInit に第二引数として渡されます。

  • Vuex Strict モード

    • Strict モードは dev モードではデフォルトで有効化されており、production モードでは無効化されています。strict モードを dev で無効化するには、以下の例を参照してください。

コマンド

  • コマンド一覧
    • nuxt
      • 開発サーバー起動
    • nuxt build
      • Webpack でビルド、ミニファイ
    • nuxt start
      • プロダクションモードでサーバーを起動（nuxt build 後に実行）
    • nuxt generate
  • プロダクションのデプロイ

    • Nuxt.js では 3つのモードからアプリケーションのデプロイを選択できます。サーバレンダリング、SPA、そして静的生成です。

    • （必要になったら読む）

開発ツール

  • エンドツーエンドテスト
    • （必要になったら読む）
  • ESLint と Prettier
    • （必要になったら読む）

その他