layoutsディレクトリ内のファイルでテンプレートを分岐する
layoutsディレクトリとは？
Nuxt.jsやVue.jsでは、コンポーネントという概念があり、ヘッダーやフッター、サイドバーなどをコンポーネントにするかと思います。
しかし、もっと大きな枠でコンポーネントとして、テンプレートを定義しておきたい！みたいなこともあるかと思います。
例えば、これから説明する例ですが、
・トップページと会員登録ページ → ヘッダーのみ
・その他のページ → ヘッダー ＋ フッター
という時にNuxt.jsでは、layoutsディレクトリで、
・Headerコンポーネントのみをインポートしたレイアウト
・HeaderコンポーネントとFooterコンポーネントをインポートしたレイアウト
を定義することができます。
例をあげた方がわかりやすいので、説明していきます。
layoutsを用いた例
.
├── layouts
│ ├── default.vue
│ └── Top.vue
├── pages
├── index.vue
├── New.vue
└── Mypage.vueまずは、用意したファイルについて、簡単に説明しておきます。
・layouts/default.vue → layoutを指定しなかった場合に適用される
・layouts/Top.vue → トップと会員登録ページで適用させる
・pages/index.vue → トップページ
・pages/New.vue → 新規会員登録ページ
・pages/Mypage.vue → マイページ
/layouts内のファイル
default.vue
default.vueでは、ヘッダーとフッターを含むテンプレートを作成します。
<template>
<div id="default">
<Header></Header>
<nuxt/>
<Footer></Footer>
</div>
</template>
<script>
import Header from "~/components/Header.vue"
import Footer from "~/components/Footer.vue"
export default {
components:{
Header,
Footer
}
}
</script>Top.vue
Top.vueでは、ヘッダーのみを使用したテンプレートを作成します。
<template>
<div id="top">
<Header></Header>
<nuxt/>
</div>
</template>
<script>
import Header from "~/components/Header.vue"
export default {
components:{
Header
}
}
</script>/pages内のファイル
index.vue
<template>
<div id="index">
</div>
</template>
<script>
export default {
layout: "Top" // "layout"をキーとして、エクスポートするだけ！
}
</script>
Mypage.vue
<template>
<div id="mypage">
</div>
</template>
<script>
export default{ // "layout"キーは、指定しなくてOK、その場合default.vueが適用される。
}
</script>
