Nuxt.js レイアウトディレクトリを試してみる。

レイアウトディレクトリ

ページコンポーネントに各ページで共通になる部分(ヘッダ部、フッタ部)を記述するのが面倒。
Nuxtにはレイアウト作成の機能があり各ページに共通のレイアウト適用することが可能。

layoutsディレクトリにdefault.vueを作成

layoutsディレクトリ

/layouts/default.vue

<template>
    <div>
        <header style="border-bottom:solid 1px #CCC;padding:10px">ヘッダ部(デフォルト)</header>
        <div style="border-bottom:solid 1px #CCC">
            <nuxt/>
        </div>
        <footer style="padding:10px">フッタ部(デフォルト)</footer>
    </div>
</template>

レイアウトを指定しなかった時に適用されるデフォルトのレイアウト。
<nuxt/>がページコンポーネントが表示される部分。

/pages/layout_default.vue

<template>
    <div style="padding:10px">ボディ部</div>
</template>

<script>
export default {
  name: 'LayoutDefault'
}
</script>

http://localhost:3000/layout_default

http://localhost:3000/layout_default

レイアウトに関する記述がないのでデフォルトのレイアウトが適用される。

layoutsディレクトリにsample.vueを作成

layoutsディレクトリ

/layouts/sample.vue

<template>
    <div>
        <header style="border-bottom:solid 1px #CCC;padding:10px">ヘッダ部(個別)</header>
        <div style="border-bottom:solid 1px #CCC">
            <nuxt/>
        </div>
        <footer style="padding:10px">フッタ部(個別)</footer>
    </div>
</template>

ページコンポーネントで指定することによって適用されるレイアウト。

/pages/layout_sample.vue

<template>
    <div style="padding:10px">ボディ部</div>
</template>

<script>
export default {
  name: 'LayoutSample',
  layout: 'sample'
}
</script>

http://localhost:3000/layout_sample

http://localhost:3000/layout_sample

ページコンポーネントで指定したレイアウト(layout: 'sample')が適用される。

ヘッダ部やフッタ部は部品としてcomponents直下に作成した方がいいかも。
次回はこのあたりを試そうかと。