Vuetify~ヘッダー＆フッター~

それでは、コンポーネントを使って行きましょう👩‍💻

ちなみにコンポーネントの詳細は、公式にあります👍
▶https://vuetifyjs.com/ja/components/alerts/

では、ヘッダーを作っていきます。
公式ページのBarのコンポーネントを使って行きたいと思います😊

app.vue

<template>
  <v-app>
 <v-app-bar
  color="pink"
 dark app height="90">テストサイト</v-app-bar>
<v-footer color="pink" dark app height="100">テストサイト
</v-footer>


  </v-app>
</template>

てな感じになります。
ブラウザ上ではこうなります😊

①ヘッダー

ヘッダー作成の際は、dark appを忘れないようにしてください。これはヘッダーの位置を自動調整してくれます！
また、高さ調整もできますが、この場合はcssと違い、height="90"となります！！

②フッター

フッターの作成の場合も同様です。dark app を忘れると、フッターがヘッダーの位置に固定されてしまいます😅