# Nuxt.jsの「layouts」を使用してレイアウトの共通化を行う方法｜Nuxt.jsの基本

URL: https://webrandum.net/nuxt-layouts/
公開日: 2022-03-05
更新日: 2022-03-05
カテゴリー: コーディング
タグ: Nuxt.js
出典: Webrandum（著者: サイトウ マサカズ）

Nuxt.jsにはぺーじごとにレイアウトを切り替える機能があります。

元から存在するのは「layouts/default.vue」だけですが、「layouts」フォルダ内にレイアウト用のファイルを作成し、「pages」配下の各ページファイルからレイアウトを指定して使います。

この機能をうまく使うことで、複数ページで共通使用するレイアウトをまとめて管理できます。

## レイアウトの作成

### default.vue

まずデフォルトで設定されている「layouts/default.vue」の中身は下記のようになっています。

```
<template>
  <div>
    <Nuxt />
  </div>
</template>
```

この`<Nuxt />`タグの中にpages配下のコードが入ります。

これをコピーして、レイアウト共有の処理やコードを追加していきます。

基本的にはpagesと同じようにNuxt.jsの処理も普通に書けます。

## レイアウトの適用方法

レイアウトを適用したいときは、「pages」配下のファイルの`export default`直下の`layout`でファイル名を指定します。

例えば「layouts/list.vue」を適用したい場合は「`layout: 'list'`」と指定します。

```
<script>
export default {
  layout: 'list', // ← 「list.vue」が適用される
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>
```

## error.vue

「layouts/error.vue」を作成すると、全ページ共通のエラーページを設定できます。

このエラーページではデフォルトで「`error`」propsが渡されて、その中に「`statusCode`」というHTTPステータスコードを表す値（404や500など）を持っています。

この値を使えば、どのステータスコードなのかによってメッセージを切り替えたりもできます。

```
<template>
  <div class="page is-error">
    <h1>{{ error.statusCode }}</h1>
    <h2>エラーが発生しました</h2>
  </div>
</template>

<script>
export default {
  props: {
    error: { type: Object, default () { return {} } }
  }
}
</script>
```