はじめに
Vue.jsのフレームワークであるVuetifyを用いて、ホームページに使うようなトップページとサイドバーを表示させてみました。
大まかな流れは以下のとおりです.
- Vueアプリケーションの作成、Vuetifyの追加
- トップバーの設置
- ロゴの設置・文字の表示
- サインアウトボタンの設置
- サイドバーの設置
- サイドバーの開閉
- サイドバーにアイコンの表示
- サイドバーからクリックで画面遷移
開発環境
- Windows 11
- Vue CLI 5.0.8
- Vue 2.7.14
- npm 6.14.14
- Node.js 14.17.5
実装
Vueアプリケーションの作成、Vuetifyの追加
以下のコマンドを実行してVueアプリケーションを作成します。
vue create フォルダ名
フォルダ名は任意です。
Vueアプリケーションが作成できたら、以下のコマンドを実行して、Vuetifyを追加します。
vue add vuetify
途中でプリセットの選択を聞かれるので、Default(recommended)を選択します。
Vuetify追加後、以下のコマンドを実行してみてください。
npm run serve
無事、Vuetifyが追加できています。
デフォルトで作成されるファイルのうち、今回は主にApp.vueを変更していきます。
まずは、App.vueを以下のように変更してください。
<template>
<v-app>
</v-app>
</template>
トップバーの設置
まずはトップバーを設置します。
v-app-barタグでトップバーを追加することができます。
<template>
<v-app>
<v-app-bar
app
dark
clippedLeft
:height="60"
>
</v-app-bar>
</v-app>
</template>
appは、高さをいい感じに自動調整してくれます。
darkは、バーの色をdarkにします。
clippedLeftは、左に固定します。
:height="60"は、数字を変更することで高さを調節します。
ここまで完成すると以下のようになります。
ロゴの設置・文字の表示
v-imgタグで画像の表示ができます。
今回はv-spacerタグでスペースを空けて、左端にロゴ、右端に仮のアカウント名を表示させています。
<template>
<v-app>
<v-app-bar
<!--省略-->
>
<v-img
src="./assets/logo_test.png"
max-height="90%"
max-width="130"
class="mr-3"
></v-img>
<v-spacer></v-spacer>
<p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
</v-app-bar>
</v-app>
</template>
srcは、画像へのパスです。
max-heightで最大の高さ、max-widthで最大の幅を指定します。
mrはmargin-reft、mbはmargin-bottomのことです。
サインアウトボタンの設置
次にアカウント名の横にサインアウトボタンを配置します。
v-btnでボタンを配置することができます。
<template>
<v-app>
<!--省略-->
>
<v-img
<!--省略-->
></v-img>
<v-spacer></v-spacer>
<p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
<v-btn
color="blue"
>
サインアウト
</v-btn>
</v-app-bar>
</v-app>
</template>
colorで色を指定することができます。
今回はblueです。
サイドバーの設置
v-navigation-drawerタグでサイドバーを描画できます。
その中にv-listタグでリストを作成し、v-list-itemでitemを追加します。
今回はトップページとアカウントのメニューを作成しています。
<template>
<v-app>
<v-app-bar
<!--省略-->
>
<v-img
<!--省略-->
></v-img>
<v-spacer></v-spacer>
<p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
<v-btn
color="blue"
>
サインアウト
</v-btn>
</v-app-bar>
<v-navigation-drawer
app
dark
clipped
:width="200"
>
<v-list
nav
dense
>
<v-list-item>
<v-list-item-title>トップページ</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>アカウント</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
サイドバーの開閉
まず、開閉に利用するハンバーガーメニューボタンを追加します。
v-app-bar-nav-iconタグでハンバーガーメニューを描画できます。
@click="drawer = !drawer"でクリックしたときの開閉を制御します。
v-navigation-drawerタグに
:value="$vuetify.breakpoint.mdAndDown? drawer : true"
:expand-on-hover="$vuetify.breakpoint.lgAndUp && drawer"
の2行を追加します。
また、scriptタグ内にもコードを加えます。
<template>
<v-app>
<v-app-bar
<!--省略-->
>
<v-app-bar-nav-icon
@click="drawer = !drawer"
>
</v-app-bar-nav-icon>
<v-img
<!--省略-->
></v-img>
<v-spacer></v-spacer>
<p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
<v-btn
color="blue"
>
サインアウト
</v-btn>
</v-app-bar>
<v-navigation-drawer
app
dark
clipped
:width="200"
:value="$vuetify.breakpoint.mdAndDown? drawer : true"
:expand-on-hover="$vuetify.breakpoint.lgAndUp && drawer"
>
<v-list
nav
dense
>
<v-list-item>
<v-list-item-title>トップページ</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>アカウント</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
<script>
export default {
data () {
return {
drawer:this.$vuetify.breakpoint.lgAndUp,
}
},
}
</script>
サイドバーにアイコンの表示
まず、以下のコマンドでVuetifyのIcon Fontsをインストールします。
npm install @mdi/font -D
次にvuetify.jsに
import '@mdi/font/css/materialdesignicons.css'
を追加してmdi/fontをインポートします。
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import '@mdi/font/css/materialdesignicons.css'; //追加
Vue.use(Vuetify);
export default new Vuetify({
});
次に先ほど追加したv-list-itemの中にアイコンを追加します。
以下のように書き換えるとアイコンを追加することができます。
<template>
<v-app>
<v-app-bar
<!--省略-->
>
<v-app-bar-nav-icon
@click="drawer = !drawer"
>
</v-app-bar-nav-icon>
<v-img
<!--省略-->
></v-img>
<v-spacer></v-spacer>
<p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
<v-btn
color="blue"
>
サインアウト
</v-btn>
</v-app-bar>
<v-navigation-drawer
<!--省略-->
>
<v-list
nav
dense
>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>トップページ</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-account</v-icon>
</v-list-item-icon>
<v-list-item-title>アカウント</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
<script>
export default {
data () {
return {
drawer:this.$vuetify.breakpoint.lgAndUp,
}
},
}
</script>
サイドバーからクリックで画面遷移
画面遷移にはrouterを用いるので以下のコマンドでインストールします。
npm install vue-router
次に、画面遷移先のAccount.vueをcomponentsフォルダ内に作成します。
Account.vueの中身は以下のとおりです。
<template>
<v-app>
<div>
<p>アカウントのページです。</p>
</div>
</v-app>
</template>
次にrouter.jsを作成します。
routerフォルダをsrc内に新規作成し、その中にrouter.jsファイルを作成し、中身を以下のようにします。
import Vue from "vue";
import Router from "vue-router";
import Home from '../components/HelloWorld.vue'
import Account from '../components/Account.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/account', component: Account },
]
})
次に、main.jsを以下のように編集します。
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router/router' //追加
Vue.config.productionTip = false
new Vue({
vuetify,
router, //追加
render: h => h(App)
}).$mount('#app')
そして、router-viewタグをApp.vueに追加します。
<template>
<template>
<v-app>
<v-app-bar
<!--省略-->
>
<v-app-bar-nav-icon
@click="drawer = !drawer"
>
</v-app-bar-nav-icon>
<v-img
<!--省略-->
></v-img>
<v-spacer></v-spacer>
<p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
<v-btn
color="blue"
>
サインアウト
</v-btn>
</v-app-bar>
<v-navigation-drawer
<!--省略-->
>
<v-list
nav
dense
>
<!--省略-->
</v-list>
</v-navigation-drawer>
<router-view/> <!--追加-->
</v-app>
</template>
<script>
export default {
data () {
return {
drawer:this.$vuetify.breakpoint.lgAndUp,
}
},
}
</script>
ここまで完成すると、サイドバーのアカウントをクリックすると、アカウントのページに遷移することができます。
まとめ
今回は、Vuetifyでトップバーとサイドバーを表示させてみました。
いろいろなパーツがあらかじめ用意されているのは非常に便利ですよね。
使いこなせるようになるためにも、引き続き触っていきたいと思います!