Nuxt独自

【Nuxt.js】Nuxt文法編:layout

前置き

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

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


layout

基本的な使い方

HeaderFooterを固定で表示させてみます🌟

directory

layouts/
--| default.vue

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

コード

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

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

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

) file

) pages

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

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

ポイント

ページ内コンポーネントのリンクは
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を指定するだけです👍❤️

directory

layouts/
--| default.vue
--| blog.vue

pages/
--| index.vue
--| blog/
-----| posts.vue

index.vue

blog/posts.vue

コード

index.vuelayouts/default.vue
基本的な使い方と全く同じです!

) file

) pages

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


エラーページ

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

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

コード


まとめ

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

-Nuxt独自
-,

© 2020 aLiz Nuxt