LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@tatsuki-tsuchiyama(土山 竜輝)

Vue2 × Vuetifyでトップバーとサイドバーを表示させてみた

Last updated at Posted at 2023-02-22

はじめに

Vue.jsのフレームワークであるVuetifyを用いて、ホームページに使うようなトップページとサイドバーを表示させてみました。
大まかな流れは以下のとおりです．

  1. Vueアプリケーションの作成、Vuetifyの追加
  2. トップバーの設置
  3. ロゴの設置・文字の表示
  4. サインアウトボタンの設置
  5. サイドバーの設置
  6. サイドバーの開閉
  7. サイドバーにアイコンの表示
  8. サイドバーからクリックで画面遷移

開発環境

  • 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

screencapture-localhost-8080-2023-02-18-14_15_01.png

無事、Vuetifyが追加できています。

デフォルトで作成されるファイルのうち、今回は主にApp.vueを変更していきます。
まずは、App.vueを以下のように変更してください。

App.vue
<template>
  <v-app>
  </v-app>
</template>

トップバーの設置

まずはトップバーを設置します。
v-app-barタグでトップバーを追加することができます。

App.vue
<template>
  <v-app>
    <v-app-bar
      app
      dark
      clippedLeft
      :height="60"
    >
　　</v-app-bar>
  </v-app>
</template>

appは、高さをいい感じに自動調整してくれます。
darkは、バーの色をdarkにします。
clippedLeftは、左に固定します。
:height="60"は、数字を変更することで高さを調節します。

ここまで完成すると以下のようになります。

screencapture-localhost-8080-2023-02-18-14_42_38.png

ロゴの設置・文字の表示

v-imgタグで画像の表示ができます。
今回はv-spacerタグでスペースを空けて、左端にロゴ、右端に仮のアカウント名を表示させています。

App.vue
<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のことです。

ここまで完成すると以下のようになります。
screencapture-localhost-8080-2023-02-18-14_47_52.png

サインアウトボタンの設置

次にアカウント名の横にサインアウトボタンを配置します。
v-btnでボタンを配置することができます。

App.vue
<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です。

ここまで完成すると以下のようになります。
screencapture-localhost-8080-2023-02-18-14_53_34.png

サイドバーの設置

v-navigation-drawerタグでサイドバーを描画できます。
その中にv-listタグでリストを作成し、v-list-itemでitemを追加します。
今回はトップページとアカウントのメニューを作成しています。

App.vue
<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>

ここまで完成すると以下のようになります。
screencapture-localhost-8080-2023-02-18-15_57_59.png

サイドバーの開閉

まず、開閉に利用するハンバーガーメニューボタンを追加します。
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タグ内にもコードを加えます。

App.vue
<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をインポートします。

vuetify.js
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の中にアイコンを追加します。
以下のように書き換えるとアイコンを追加することができます。

App.vue
<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>

ここまで完成すると以下のようになります。
screencapture-localhost-8080-2023-02-18-16_35_51.png

サイドバーからクリックで画面遷移

画面遷移にはrouterを用いるので以下のコマンドでインストールします。

ターミナル
npm install vue-router

次に、画面遷移先のAccount.vueをcomponentsフォルダ内に作成します。
Account.vueの中身は以下のとおりです。

Account.vue
<template>
    <v-app> 
      <div>
        <p>アカウントのページです。</p>
      </div>
    </v-app>
</template>

次にrouter.jsを作成します。
routerフォルダをsrc内に新規作成し、その中にrouter.jsファイルを作成し、中身を以下のようにします。

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を以下のように編集します。

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に追加します。

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>

ここまで完成すると、サイドバーのアカウントをクリックすると、アカウントのページに遷移することができます。
screencapture-localhost-8080-account-2023-02-21-16_18_59.png

まとめ

今回は、Vuetifyでトップバーとサイドバーを表示させてみました。
いろいろなパーツがあらかじめ用意されているのは非常に便利ですよね。
使いこなせるようになるためにも、引き続き触っていきたいと思います！

1
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?