Vue.js

Nuxt.jsのlayoutsとpagesとcomponentsの使い分け

Nuxtのプロジェクトを作成すると、layoutsとpagesとcomponentsフォルダが作成されます。 layoutsとpagesとcomponentsの使い分けについて紹介します。

この記事の目次
  1. layoutsとpagesとcomponentsの使い分け
  2. pagesとcomponentsの違い

layoutsとpagesとcomponents
上のようにNuxtのプロジェクトを作成すると、layoutsとpagesとcomponentsフォルダが作成されます。

layoutsとpagesとcomponentsの使い分けについて紹介します。

layoutsとpagesとcomponentsの使い分け

layoutは大枠のレイアウトを指定するために使います。
そのlayoutの中に、各pageが配置されます。

pageの中には、子pageを入れることもできますし、componentsを入れることもできます。

このcomponentsは複数のpageで使うことができます。

pagesとcomponentsの違い

pagesでは、フォルダとファイルの構造でパラメーターが自動的に生成されます。componentsにはそれがありません。