Nuxtで使うlayoutを変更する【Nuxt】

Nuxtではlayoutを指定しなければ、layout/default.vueが読み込まれますが、default.vue以外を使いたい時ももちろん出てきます。

別のlayoutを使う方法をもちろんNuxtは用意してくれています。

layoutディレクトリにファイルを作る

layoutディレクトリ配下にvueファイルを作りましょう。
名前は何でもOKです。

基本形は下のような感じです。
追加したいものを適宜追加してください。

<template>
  <div>
      this is not default layout !!!!
    <nuxt />
  </div>
</template>

<script>
export default {
}
</script>

layoutを指定する

使うlayoutを指定しなければ、layout/default.vueが使われてしまうので、指定してあげます。

使い方はlayout:'使うlayout'を呼び出す側で宣言するだけです。
ちなみに .vue の拡張子は不要で、ファイル名だけを指定します。

<template>
    <div>
        hello Nuxt layout!!
    </div>
</template>

<script>
export default{
  layout:'other_layout'
}
</script>