タグ

2021年7月28日のブックマーク (3件)

  • コンテンツディレクトリ

    コンテンツディレクトリ @nuxt/content モジュールを使うことで Nuxt アプリケーションを強化できます。このモジュールは content/ ディレクトリへの書き込みや、Git ベースのヘッドレス CMS のように動作する MongoDB のような API を介してマークダウン、JSON、YAMLCSV ファイルを取得できます。 開発時のホットリロード マークダウンファイルに変更があった場合 webpack を介する必要がないので、開発時における content モジュールのホットリロードは非常に高速です。また、content:update イベントのリッスンやプラグインを作ることもできるので content 内のファイルを更新するたびに例えば fetchCategories メソッドをディスパッチすることができます。

    コンテンツディレクトリ
    lilpacy
    lilpacy 2021/07/28
    nuxtでcms作るときとか参考になりそう
  • データの取得

    データの取得 Nuxt では、API からデータを取得する方法が 2 つあります。fetch メソッドまたは asyncData メソッドを使用できます。 Nuxt はコンポーネントの mounted() フックでデータを取得するなど、クライアントサイドアプリケーションにおける従来の Vue のデータの取得パターンをサポートしています。しかしユニバーサルアプリケーションでは、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt 特有のフックを使う必要があります。これにより、必要なデータがすべて存在する状態でページをレンダリングすることができます。 Nuxt には、データを非同期に読み込むためのフックが 2 つあります。 asyncData。このフックは、 ページ コンポーネントでのみ使用できます。fetch とは異なり、クライアントサイドレンダリング中にローディングプレー

    データの取得
    lilpacy
    lilpacy 2021/07/28
    fetch/asyncDataの詳細説明と違いなど
  • Nuxt ライフサイクル

    Nuxt ライフサイクル どのツールを使う場合でも、ツールが内部でどのように機能するかを理解すると常に自信が持てるようになります。同じことが Nuxt にも当てはまります。 この章の目的は、フレームワークのさまざまな部分とそれらの実行順序、およびどのように連携するかについての概要を説明することです。 Nuxt ライフサイクルはアプリケーションがバンドルされ、チャンク化され、縮小されるビルドフェーズの後に何が起こるかを説明します。このフェーズの後に何が起こるかは、サーバーサイドのレンダリングが有効になっているかどうかによって異なります。有効になっている場合は、選択したサーバーサイドレンダリングのタイプによってさらに異なります: 動的な SSR(nuxt start) または、静的サイト生成(nuxt generate) ライフサイクル サーバー SSR の場合、これらのステップはアプリケーシ

    Nuxt ライフサイクル
    lilpacy
    lilpacy 2021/07/28
    html生成の流れとhookが時系列で網羅的に整理されてる