[Vue.js]Vuetifyを使って、サイドからスライドインするドロワーメニュー（ハンバーガーメニュー）を作る方法[v-navigation-drawer]

この記事をシェアする：

Vuetifyで、サイドからスライドインして現れる、ドロワーメニューを使ってみます

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、22回目になります。

今回は、いわゆる「ドロワー」だとか「ハンバーガーメニュー」と呼ばれているUIパーツの、Vuetify版についての記事です。
まずは以下の動画を見ていただくと、どんなものが扱えるかわかりやすいかと思います。
↑Vuetify の v-navigation-drawer を使って、このようなドロワーメニューを表示してみます。

Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

v-navigation-drawer を呼び出すコード

v-navigation-drawer コンポーネントを呼び出すサンプルコードは、以下のようになります。
コード内のコメントにも書いてありますが、v-navigation-drawer を呼び出している部分自体は29行目〜60行目までです。

<template>
  <v-card
    class="mx-auto overflow-hidden"
    height="667"
    width="375"
  >

    <!-- ここはアプリ風UIのヘッダ部分 -->
    <v-system-bar color="indigo darken-3"></v-system-bar>
    <v-app-bar
      color="indigo accent-4"
      dark
      prominent
    >
      <v-app-bar-nav-icon @click.stop="mydrawer = !mydrawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Own WebPage</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-app-bar>
    <!-- // ここはアプリ風UIのヘッダ部分 -->

    <!-- ここがdrawerコンポーネントを呼び出している部分 -->
    <v-navigation-drawer
      v-model="mydrawer"
      absolute
      bottom
      temporary
    >
      <v-list
        nav
        dense
      >
        <v-list-item-group
          v-model="mygroup"
          active-class="cyan--text text--accent-4"
        >
          <v-list-item>
            <v-list-item-title>Vue.js</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Vuetify</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>WordPress</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Structured</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <!-- // ここがdrawerコンポーネントを呼び出している部分 -->

    <v-card-text>
      Vuetify also provides a drawer menu component by default like this, so it's easy to run.
      <span style="display: block; font-size: .6rem;">（Vuetifyでは、このようにドロワーメニューのコンポーネントもデフォルトで用意されていて、簡単に扱うことができます。）</span>
    </v-card-text>

  </v-card>
</template>

↑Vuetify に定義されている v-navigation-drawer コンポーネントを呼び出す基本形は、上記の様な形になります。
上記のサンプルコードでは、便宜上アプリ風のヘッダUIを冒頭（9〜25行目）で作成していて、
その中に置いてあるハンバーガーメニュー的なアイコンをトリガーとして使用しています（15行目）。

Vuetifyのコンポーネントを使う際によくある例ですが、
単純に真偽値(true/false)をもつ data （ここでは mydrawer という名前にしました）を v-model で紐づけてあり、それが true になればドロワーが開き、 falseになれば閉じる、という仕組みです。

また、ドロワーメニュー本体に対しては、40行目のように v-model="mygroup" として、
こちらも data が紐づけられていますが、このdataには、
選択された項目の番号が数字として返ってきます。（0番目始まりで返ってきます。）

この性質をうまく使えば、選択された項目に応じて何かをする（一番単純なのはページ遷移でしょうか）、
といったプログラム側での制御が可能かと思います。

最低限、用意しておくdataは、以下のようになります。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        mydrawer: false,
        mygroup: null, // ← 初期値はnullではなく、文字列でも数値でも良いです
      },
    });
</script>