レイアウト・再利用する部品の作成

前回はごくごくシンプルなページを作ったので、今回は今後作成していくページで使用していくヘッダーやボタンなどのコンポーネントを作成していく。

ヘッダー&フッターの作成

NuxtではlayoutsフォルダにVueファイルを置くと、ページ全体の枠組みとして自動で適用され、特にdefault.vue は全ページで適用されるデフォルトレイアウトになる。
※layoutsフォルダは自動生成されないため、新規作成が必要（後述するcomponentsも同様）

今回はとりあえずトップページに戻るボタンが配置されたヘッダーと一応作るだけのフッターを作成する。

default.vue

<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タグを初めて知った)

app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

また、NuxtLayoutタグがないと読み込まないので注意（1敗）

再利用する部品の作成

今回はおためしで数ページ作るだけなのでボタンだけコンポーネント化する

BaseButton.vue

<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

最終的にレイアウトは以下のようなコードになった

default.vue

<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

🤖
https://chat.openai.com/