【Nuxt.js/Vue.js】layoutsとは
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
この記事が気に入ったらサポートをしてみませんか?