レイアウト・再利用する部品の作成
前回はごくごくシンプルなページを作ったので、今回は今後作成していくページで使用していくヘッダーやボタンなどのコンポーネントを作成していく。
ヘッダー&フッターの作成
NuxtではlayoutsフォルダにVueファイルを置くと、ページ全体の枠組みとして自動で適用され、特にdefault.vue は全ページで適用されるデフォルトレイアウトになる。
※layoutsフォルダは自動生成されないため、新規作成が必要（後述するcomponentsも同様）
今回はとりあえずトップページに戻るボタンが配置されたヘッダーと一応作るだけのフッターを作成する。
<template>
<div>
<!-- ヘッダー -->
<header style="background: #333; color: white; padding: 1rem;">
<h1>データ閲覧システム</h1>
<nav>
<NuxtLink to="/">Top</NuxtLink>
</nav>
</header>
<!-- ページ内容 -->
<main>
<NuxtPage />
</main>
<!-- 共通のフッター -->
<footer style="background: #eee; padding: 1rem; margin-top: 2rem;">
<a href="https://ansaikuropedia.org/wiki/%E3%81%9F%E3%82%89%E3%81%84%E3%81%BE%E3%82%8F%E3%81%97"
target="_blank"
rel="noopener noreferrer">
フッターリンク
</a>
</footer>
</div>
</template>
上記のNuxtPageタグ部分に各ページの内容が入る
(navタグを初めて知った)
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
また、NuxtLayoutタグがないと読み込まないので注意（1敗）
再利用する部品の作成
今回はおためしで数ページ作るだけなのでボタンだけコンポーネント化する
<template>
<button
:class="['base-button', type]"
@click="$emit('click')"
>
<slot />
</button>
</template>
<script setup>
defineProps({
type: {
type: String,
default: 'common' // 'top'...トップメニュー用 | 'common'...その他汎用ボタン
}
})
</script>
<style scoped>
.base-button {
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
color: white;
}
.top {
background-color: #42b883;
}
.common {
background-color: #35495e;
}
</style>
top画面で他ページに遷移するためのボタンとその他汎用的なボタンの2種類を作成
今回はpaddingの単位にremを使ってみた（知らなかったので使ってみたかっただけ）
ここまででできた画面はこちら
いろいろ改善点があるので修正
・背景色を追加
・コンテンツが少なくてもフッターを下に表示する
・ヘッダーの色を変更
↓
それなりに見やすくなったのでOK
最終的にレイアウトは以下のようなコードになった
<template>
<div class="layout-wrapper">
<!-- ヘッダー -->
<header style="background: #4682b4; color: white; padding: 1rem;">
<h1>データ閲覧システム</h1>
<nav>
<NuxtLink to="/">Top</NuxtLink>
</nav>
</header>
<!-- ページ内容 -->
<main class="main-content">
<NuxtPage />
</main>
<!-- 共通のフッター -->
<footer style="background: #eee; padding: 1rem; margin-top: 2rem;">
<a href="https://ansaikuropedia.org/wiki/%E3%81%9F%E3%82%89%E3%81%84%E3%81%BE%E3%82%8F%E3%81%97"
target="_blank"
rel="noopener noreferrer">
フッターリンク
</a>
</footer>
</div>
</template>
<style scoped>
/* レイアウト全体の背景色 */
.layout-wrapper {
background-color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 0;
margin: 0;
}
.main-content {
flex: 1;
padding: 1rem;
}
</style>
次回はトップページから遷移する、DBのデータを検索する画面を作成する
次回：https://qiita.com/Dye-Chan/items/34a19d3c90fd6b547cee
参考
defaultProps
https://qiita.com/ryusei_engineer/items/89e9d4f3c0bbbc0d21fd
https://ja.vuejs.org/api/sfc-script-setup
layoutsなど
https://qiita.com/MS-0610/items/d58e90c0b520b68bfd57#2-layouts%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
cssの単位
https://zenn.dev/crebo_tech/articles/article-0002-20240726
フッターを常に下に配置
https://www.design-memo.com/coding/flex-footer-fixed