レイアウトディレクトリ

レイアウトは Nuxt アプリケーションのルック&フィールを変えるとき、とても役に立ちます。例えばサイドバーを含めたいときや、モバイルとデスクトップのための別々のレイアウトを持ちたいときなどに有用です。

デフォルトレイアウト

layouts/default.vue ファイルを追加することでメインレイアウトを設定できます。これはレイアウトが指定されていない全てのページで使用されます。ページコンポーネントを含むレイアウトを作成するときには <Nuxt> コンポーネントを記述することを忘れないようにしてください。

レイアウトに必要なのは、ページコンポーネントをレンダリングするための 3 行のコードだけです。

<template>
  <Nuxt />
</template>

ナビゲーションやヘッダー、フッターのようなコンポーネントもここに追加できます。

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

カスタムレイアウト

layout ディレクトリの全てのファイル（トップレベル）は、ページコンポーネントの layout プロパティで使えるカスタムレイアウトが作られます。

ブログレイアウトを作成して layouts/blog.vue に保存しましょう：

<template>
  <div>
    <div>My blog navigation bar here</div>
    <Nuxt />
  </div>
</template>

その後、カスタムレイアウトを使用するためにページに教えなければなりません。

<script>
export default {
  layout: 'blog',
  // OR
  layout (context) {
    return 'blog'
  }
}
</script>

エラーページ

エラーページはエラーが発生したときいつも表示される ページコンポーネント です（サーバーサイドで発生したエラーではない）。

上述したように、このレイアウトは特殊でテンプレートの中に <Nuxt> を含めるべきではありません。このレイアウトは、エラーが発生したときに表示されるコンポーネントとして表示されなければなりません（404、500 など）。他のページコンポーネントと同様に、エラーページにも通常の方法でカスタムレイアウトを設定することができます。

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

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // エラーページ用のカスタムレイアウトを設定できます
}
</script>