Vuetifyのv-app-barコンポーネントのデカすぎたり謎の余白を解消する

起きた問題①

ヘッダーでかすぎ

起きた問題②

謎の余白

起きた問題③

要素がかぶって見えなくなる

解決方法

全体に広がっている原因は、ナビゲーションバーの高さ調整が行われていないため。
タグにappと入力すると高さを自動変換してくれる。

要素がかぶって見えなくなる原因はタグで囲っていないから。

<template>
  <div>
    <v-app>
      <v-app-bar color="primary" app>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-app-bar>
      <v-main>
        <slot />
      </v-main>
    </v-app>
  </div>
</template>

上記を実行すると

あとは余白を整えるなりヘッダーをカスタムなりすればOK！