【Nuxt.js】Nuxt文法編：layout

🎈 この記事はWP専用です
https://wp.me/pc9NHC-A4

前置き

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

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

layout

基本的な使い方

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

directory

layouts/
--| default.vue

pages/
--| index.vue
--| sample.vue

コード

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

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

layouts/default.vue

<template>
 <Nuxt />
</template>

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

layouts/default.vue

<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>

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

index.vue

<template>
 <div class="page">
   <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に遷移することができます🌟
リンク

カスタムレイアウト

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-A4