Nuxt.jsのlayoutsとは

Nuxt.jsでは、layoutsフォルダの中に「default.vue」ファイルを作成して、共通のレイアウトを作る事ができる。
公式はこちら　https://ja.nuxtjs.org/guide/views/

利点

共通して表示したい部分に変更があった場合、「default.vue」の中だけを変更すれば、全てのページに変更が適用される。運用効率が高い。

どんなん時にどうやってlayoutsを使うか①

例）ヘッダーとフッターを共通パーツにして全てのページに表示にしたい

ヘッダーとフッターなど共通にしたいパーツをlayoutsフォルダの中の「default.vue」に記述すると、全てのページにヘッダーとフッターが表示される。

具体的にどうやって記述するのか

layouts＞default.vueを作成
そのファイルの中に、例えば以下のコードを記述すると、「ヘッダー」と「フッター」が全てのページで表示される。

<nuxt />というのは、共通ではないコンテンツが入る部分で、pagesのファイル内容が表示される位置になる。(pagesについては以下参照)
「ヘッダー」はコンテンツよりも上に表示させたいので、<nuxt />の上に、
「フッター」はコンテンツよりも下に表示させたいので、<nuxt />の下に、
記述する。
【注意】<nuxt />は、default.vueのみに記述する

//基本
<template>
 <div>
   <p>ヘッダー</p>
   <nuxt />
   <p>フッター</p>
 </div>
</template>

//応用編
<template>
 <div>
   <nuxt />
   <app-footer />　//フッターのコンポーネントをこの位置に設置している
 </div>
</template>

<script>
import AppFooter from '~/components/Footer.vue'　//フッターを読み込んでいる

export default {　//フッターを呼び出している
 components: {
   AppFooter
 }
}
</script>

※コンポーネントについては、ページ下部に説明あり

※Pagesとは

ページのURLに連動していてページに表示される部分
「ヘッダー」と「フッター」以外の情報を入れるファイル
詳しくはこちら　https://note.com/mg_rry/n/n54c5aacf906c

▼フォルダ構造（例）
Pagesフォルダ
　ーindex.vue　→TOP情報を入れる（http://localhost:8000/）
　ーabout.vue　→about情報を入れる（http://localhost:8000/about）
　ーuser.vue　→user情報を入れる（http://localhost:8000/user）

どんなん時にどうやってlayoutsを使うか②

例）メインテキストのフォントファミリー、サイズ、色を全てのページに充てたい

全てのページに共通して充てたいスタイル(CSS)を「default.vue」の中に記述する事で、全てのページでスタイルが適用される

具体的にどうやって記述するのか

layouts＞default.vueを作成
そのファイルの中に、以下の様に記述する
【注意】<style></style>で囲む。
<style scoped></style>で囲むと他のページには適用されなくなるのでdefault.vueでは使用しない！

<style>
html {
 font-family: 'Source Sans Pro' Arial, sans-serif ;
 font-size: 16px;
 color:#333333;
}
</style>

<style scoped>とは

コンポーネント指向で必要な機能。
そのファイルでしか適用されないCSSの記述ができる

<style scoped>
//scopedと指定する事で、ここに記述したCSSは、このファイルでしか適用されない
</style>

コンポーネント指向とは

コンポーネントとは、機能ごとにHTML/JavaScript/CSSをセットしたパーツが入った箱の様なモノ。
コンポーネント指向は、複数のコンポーネントを作って、それを組み合わせることで一つのアプリケーション(ページ)を作るという考え方
詳しくはhttps://note.com/mg_rry/n/nbc872528cc1d