【Nuxt.js】Nuxt文法編：layout

前置き

HeaderやFooter, sidebar(sidemenu)など
どのページでも固定で表示させたいコンポーネントってありますよね❓
そんな時に便利なlayoutを解説していきます🍎🙋‍♀️

公式サイトを元に順番に説明しています💡
https://ja.nuxtjs.org/guides/directory-structure/layouts/

layout

基本的な使い方

HeaderとFooterを固定で表示させてみます🌟

コード

HeaderやFooterはテキストだけなので省きます🌠
また、CSSも省略します。

ページコンポーネント(pages内のindex.vueなど)の
レンダリングはこちらの3行です🌟

<template>
  <Nuxt />
</template>

</template>

pagesが表示される位置より上にHeader,
下にFooterを表示させましょう🎶

) file

<template>
  <div class="layout">
    <Header />
    <nuxt />
    <Footer />
    </div>
  </div>
</template>

<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'

export default {
  components: {
    Header,
    Footer,
  }
}
</script>

</div>

</template>

import Header from '~/components/Header.vue'

import Footer from '~/components/Footer.vue'

export default {

components: {

Header,

Footer,

}

</script>

) pages

使用するlayoutの指定は必要ありません。
layouts/default.vueがデフォルトで適応されます🍒😀

<template>
  <div class="page">
    <p>sample</p>
  </div>
</template>

<p>sample</p>

</div>

</template>

index.vueとsample.vueを見てみてください👀
どちらのページでもHeaderとFooterが固定されているはずです🤗

ポイント

ページ内コンポーネントのリンクは
router-linkまたはnuxt-linkを使用します🎈🧸

⬇️解説記事はこちら
https://wp.me/pc9NHC-f5

index.vueにこちらを貼り付けてみると
Headerなどは固定されたまま
sample.vueに遷移することができます🌟
<nuxt-link to="/sample">リンク</nuxt-link>

カスタムレイアウト

index.vueでは
layouts/default.vue(Header, Footerを使用)にして
blog内のposts.vueでは
layouts/blog.vue(ブログ用ナビゲーションバー)を表示させてみます🌟

使い方は簡単で、
カスタムしたlayoutを指定するだけです👍❤️

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

export default {

// OR

layout (context) {

return 'blog'

}

</script>

コード

index.vueとlayouts/default.vueは
基本的な使い方と全く同じです！

) file

<template>
  <div class="blog">
    <div>My blog navigation bar here</div>
    <Nuxt />
  </div>
</template>

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

</div>

</template>

) pages

カスタムしたlayouts/blog.vueを指定

<template>
  <div class="blog">
    <p>さんぷる</p>
  </div>
</template>

<script>
export default {
  layout: 'blog',
}
</script>

</div>

</template>

export default {

}

</script>

エラーページ

エラーが起きた際に表示されるエラーページは
layoutsに配置されます。
ファイル名はerror.vueを使用します💡

ただページコンポーネントとして扱われるので
エラーページ内に<nuxt />は含みません⚠️

コード

<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' // you can set a custom layout for the error page
}
</script>

<h1 v-if="error.statusCode === 404">Page not found</h1>

<h1 v-else>An error occurred</h1>

</div>

</template>

export default {

props: ['error'],

}

</script>

まとめ

layoutを使ってコンポーネントを固定して表示できる
複数のlayoutを使いたい時はカスタムレイアウトを使う
layouts/error.vueでエラー時の固定ページも作れる