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

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

本記事では、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を追加するだけで背景のオーバーレイを実装できるとか、最高ですね……。

最後に

Vuetifyを導入するなら、画面幅の狭い端末ではドロワーメニューを使いたくなりますよね。公式のドキュメントに実装方法は詳しく説明がありますが、より簡単に実装できるように本記事のような形でまとめてみました。Vuetifyを使用している皆さんにご活用いただければ幸いです。

以上、Vuetifyでドロワーメニューをサクッと実装する方法のご紹介でした！