Nuxtの初期状態にlayouts Dirがない? layoutsをカスタマイズする方法

Nuxtインストール初期状態では、layoutsディレクトリがありません。

※ Nuxtのインストール方法によって違う可能性ありますので、ご自身のディレクト構成を確認下さい。

正確にいうと、下記ディレクトリ構成でした。
少し分かりづらいかもですが、.nuxt配下にlayoutsが存在しており、ここのdefalutが反映されている状態でした。

/.nuxt
　L　/layouts
 　L　default.vue
 L *省略*
/componets
/node_modules
/pages
/static
/sotre
*省略*

ルートディレクトリにlayoutsを作成して、layoutのカスタマイズをしていきましょう。

①：layoutsディレクトリを作成

/.nuxt
/componets
/layouts //作成
/node_modules
/pages
/static
/sotre
*省略*

②：layoutのvueを作成

/.nuxt
/componets
/layouts
 L default.vue //作成
 L other.vue //作成
/node_modules
/pages
/static
/sotre
*省略*

/layouts/default.vue

<template>
  <div>

    <div>
    <nuxt/>
    </div>

    <hr>
    <!-- Footer -->
    <footer>
      defaultですよー。
    </footer>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  footer {
    padding: 50px 0 65px;
    text-align: center;
  }
</style>

/layouts/other.vue

<template>
  <div>

    <div>
    <nuxt/>
    </div>

    <hr>
    <!-- Footer -->
    <footer>
      otherですよー。
    </footer>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
  footer {
    padding: 50px 0 65px;
    text-align: center;
  }
</style>

③：layoutを反映

/pages/index.vue へ反映

layout 単数形に注意して下さい。

<template>
  <div>
    <h1>Index.Vue</h1>
  </div>

</template>

<script>

export default {
  layout: "other", // 追記
}
</script>

④：ビルド忘れずに

npm run dev

ビルドを実行した後に確認して下さい。