📝
【Vuetify 3】Headerを設置する
目標
- Headerの設置
- 今後のカスタマイズを考慮した構成にする
事前準備
vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する
Headerを設置する
今回Headerは必要の項目だけ用意します。
- 仮設置のHOMEアイコン（リンクは設定しない）
- タイトル
- カラーをプライマリに設定する
使用する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-app>
</template>
<script>
export default {
name: "App",
data: () => ({
+ title: "びびおめがサイト",
+ home: {
+ icon: "mdi-home",
+ link: "", //今回は設定しない
+ },
}),
};
</script>
App barsのコンポーネントをシンプルに使った感じになります。
homeやtitleなど、今後変わる可能性や動的に変更する予定のものは変数に格納して管理し直に書くことはしないようにします。
実行結果
iconは設置は下記を参考に設定します
コンテンツの明記
<template v-slot:prepend>
| slot | 概要 |
|---|---|
| prepend | 入力の外部および入力コンテンツの前に項目を追加します。 |
| title | コンポーネントのタイトルコンテンツ用のスロット |
| append | 入力内および入力コンテンツの後に項目を追加します |
Git commit情報
| SHA | commit message |
|---|---|
| 7644d4e | 【Vuetify 3】Headerを設置する |
あとがき
オシャレに見せるならHeaderはあえて設置しないほうが良いとは思いますが今回はUI/UXを意識し誰もが見覚えのあるデザインにするため設置しました。
今後Headerに色々な機能を追加していく事になりそうなので今回はシンプルに設置するだけにとどめました。
基礎設定時にprimaryを設定していたので今回はそれの実装も確認できたかと思います
Discussion