🔥

【Vuetify 3】Footerを設置する

2023/06/13に公開

Vuetify

tech

目標

Footerの設置
今後のカスタマイズを考慮した構成にする

事前準備

vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する

今回Headerは必要の項目だけ用意します。

コピーライトの設置

使用するVuetify3のコンポーネントは下記になります

コーディング内容

src/plugins/vuetify.js

 <template>
   <v-app>
     <v-app-bar color="primary">
       <template v-slot:prepend>
         <v-icon aria-hidden="false"> {{ home.icon }} </v-icon>
       </template>
       <template v-slot:title>
         <v-app-bar-title>{{ title }}</v-app-bar-title>
       </template>
     </v-app-bar>
     <v-main>
       <router-view />
     </v-main>
+    <v-footer class="d-flex align-center justify-center">
+      <div>
+        {{ `${copyright.icon}　${copyright.date}　${copyright.name}` }}
+      </div>
+    </v-footer>
   </v-app>
 </template>
  <script>
   export default {
     name: "App",
   
     data: () => ({
       title: "びびおめがサイト", //サイトのタイトル
       // HOMEアイコン
       home: {
         icon: "mdi-home",
         link: "", //今回は設定しない
       },
       // コピーライトp
+      copyright: {
+        icon: "©",
+        date: "2023",
+        name: "ViviOmega",
+      },
     }),
   };
 </script>

コピーライト

上記サイトを参考に個人の場合のコピーライトを設置しました
値は変数に格納し編集しやすいようにしておき、変数はオブジェクト型にしておく。
少し扱いが面倒だが、編集する時楽になると思います。

フレックスボックス

https://vuetifyjs.com/en/styles/flex/
上記ページを参照してフレックスボックスを利用しコピーライトをfooterの中央に設置する
Vuetifyのフレックスボックスの扱いは簡単でclassを設定するだけです

実装結果

実装結果
footerのカラーはHeaderと合わせると色が煩くなるのでdarkテーマのままを採用しました

Git commit情報

SHA	commit message
afbc0ee	【Vuetify 3】Footerを設置する

あとがき

今回のfooterの設置はシンプルですが、今後SNSの連携をしたり、footerにページナビを設置したりすると複雑になっていくと思います。