【Vuetify】v-app-barにメインコンテンツが重なり、隠れてしまう問題を解決する方法を解説します。

なやむくん

Vuetifyでv-app-barがメインコンテンツと重なって見えない…。

などの疑問や悩みを解決してまいります。

Vuetifyで利用している場合、アプリケーションバーはどのように作成していますか？

Vuetifyではv-app-barというコンポーネントを利用することで簡単にアプリケーションバーの基盤を作成することができます。

みつた

Vuetifyは本当便利ですよね！

しかし、このv-app-barとメインコンテンツが被ってしまうという問題に困っている方も中に入るのではないでしょうか。

今回はv-app-barにコンテンツが重なってしまう問題を解決する方法を解説します。

みつた

Vuetifyのインストール方法は以下の記事を参考にしてみてください。

参考記事

: 【Vuetify3】Vuetifyの導入方法について解説します。

続きを見る

Table of Contents

どのような問題？

実際にどのような問題かを見てみましょう。

このように<h1>Home</h1>がv-app-barに被ってしまう問題が起きています。

なやむくん

タイトルが見えないです…。

以下がコード例です。

みつた

今回修正するのはApp.vueですが、画像に見えている内容に関連するコンポーネントファイルのコードを掲載しています。

<script setup lang="ts">
import { RouterView } from "vue-router";
import Header from "./components/parts/Header.vue";
</script>

<template>
  <v-app>
    <Header />
    <v-container>
      <RouterView />
    </v-container>
  </v-app>
</template>

<template>
  <v-app-bar color="primary" app>
    <v-app-bar-nav-icon
      variant="text"
      @click.stop="toggleNavigation"
    ></v-app-bar-nav-icon>

    <v-toolbar-title
      >30歳で異業種から<br />IT企業に転職しました</v-toolbar-title
    >
    <v-spacer></v-spacer>
  </v-app-bar>

  <v-navigation-drawer v-model="isOpen" temporary>
    <v-list>
      <v-list-item
        v-for="(item, index) in navList"
        :key="index"
        link
        :to="{ name: item.routeName }"
      >
        <v-list-item-title>
          {{ item.text }}
        </v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>
<script setup land="ts">
import { ref, watch } from "vue";

const isOpen = ref(false);
const group = ref(null);
const navList = [
  {
    text: "About",
    routeName: "about",
  },
];

watch(group, () => {
  drawer.value = false;
});

const toggleNavigation = () => {
  isOpen.value = !isOpen.value;
};
</script>

<template>
  <h1>Home</h1>
  <v-row>
    <v-col cols="3" v-for="cardData of cardDatas">
      <v-card class="mx-auto" max-width="344">
        <v-img height="200px" :src="cardData.cardImgUrl" cover></v-img>

        <v-card-title>{{ cardData.cardTitle }}</v-card-title>

        <v-card-text>{{ cardData.cardText }}</v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
const cardDatas = [
  {
    cardImgUrl: "https://mitsutano-oshiro.com/wp-content/uploads/2023/08/thistle-azami-9KYOumAwuFQ-unsplash-scaled.jpg",
    cardTitle: "カードタイトル①",
    cardText:
      "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
  },
　// 以下省略
  ];
</script>

CSSで修正することもできますが、Vuetify側で修正することができますので、今回はVuetifyで修正する方向で解説していきます。

解決方法：v-mainを使用

ページに表示させたいメインコンテンツは、v-main 内に記述します。v-main 内に記述することで、v-app-berの下にコンテンツが配置されます。

App.vueを以下のように修正します。

<script setup lang="ts">
import { RouterView } from "vue-router";
import Header from "./components/parts/Header.vue";
</script>

<template>
  <v-app>
    <Header />
    <v-main> // v-mainを追加し、v-containerを入れ子構造にする
      <v-container>
        <RouterView />
      </v-container>
    </v-main>
  </v-app>
</template>

このようにHomeの文字が表示されました。

ソースを見てみるとmainタグがアプリケーションバーの高さ分、上に余白があることが分かります。

まとめ

ここまで読んでいただきありがとうございました。本記事のまとめです。

ポイント

v-app-berの重なりはメインコンテンツをv-main 内に記述し解決できる

【Vuetify】v-app-barにメインコンテンツが重なり、隠れてしまう問題を解決する方法を解説します。

【Vuetify3】Vuetifyの導入方法について解説します。

どのような問題？

解決方法：v-mainを使用

まとめ