【Vuetify】ドロワーメニューをサクッと実装する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyでドロワーメニューをサクッと実装する方法をご紹介しています。

Vuetifyでドロワーメニューを楽に、シンプルに実装したいな…

上記の要望にお応えします。

では、解説していきます。

ドロワーメニューを実装する

タイトルあるように、Vuetifyでドロワーメニューをサクッと実装してみます。ここではシンプルにコンテンツにリンクだけを追加したドロワーメニューを作成してみます。

HTML

<div id="app">
    <v-app>
        <div>
            <v-app-bar>
                <v-app-bar-nav-icon v-on:click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            </v-app-bar>

            <v-navigation-drawer
                v-model="drawer"
                absolute
                temporary
            >
                <v-list>
                    <v-list-item-group>
                        <v-list-item><a href="#">Menu Item1</a></v-list-item>
                        <v-list-item><a href="#">Menu Item2</a></v-list-item>
                        <v-list-item><a href="#">Menu Item3</a></v-list-item>
                        <v-list-item><a href="#">Menu Item4</a></v-list-item>
                    </v-list-item-group>
                </v-list>
            </v-navigation-drawer>
        </div>
    </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        drawer: false,
    }),
})

実行結果は下記の通り。デモ左上のハンバーガーアイコンをクリックするとドロワーメニューが開閉します。

See the Pen 7314 by ryohei (@intotheprogram) on CodePen.

基本的に下記のページを参考にした内容となっています。カスタマイズされる場合に参考になると思います。

参考：https://vuetifyjs.com/ja/components/navigation-drawers/

使用しているプロパティについて

前項でご紹介したドロワーメニューでは、二つのプロパティを使用しています。それぞれ下記の役割を担っています。

absolute	コンポーネントにアブソリュートを追加する
temporary	ドロワーメニューが開いているときに、背景に半透明の要素をオーバーレイ表示する

temporaryを追加するだけで背景のオーバーレイを実装できるとか、最高ですね……。