Vue.js

【Nuxt.js】layoutsディレクトリ内のファイルでテンプレートを分岐する

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>

参考記事

Qiitaの記事

公式

COMMENT

メールアドレスが公開されることはありません。