レイアウトディレクトリ

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

このディレクトリは追加の設定なしに名前を変更できません

デフォルトレイアウト

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

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

layouts/default.vue

<template>
  <Nuxt />
</template>

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

layouts/default.vue

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

もし components プロパティを true に設定していたら、コンポーネントを追加するために import 文は必要ないです。

カスタムレイアウト

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

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

layouts/blog.vue

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

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

pages/posts.vue

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

エラーページ

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

このファイルは layout フォルダに置かれますが、ページとして扱われるべきです。

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

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

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>