コードをご紹介

それではこのセクションより、
Vuetify で汎用的なモーダル、ダイアログを表示するコードについて書いていきます。

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

<template>
  <div class="text-center">
    <v-dialog
      v-model="dialog"
      width="500"
    >
                  
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary lighten-2"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Dialog Open
        </v-btn>
      </template>

      <v-card>
        <v-card-title class="headline grey lighten-2">
          Vuetify で v-dialog をつかってみる
        </v-card-title>

        <v-card-text style="margin: 1rem auto;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
          閉じる
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

解説など

では、詳しく見ていきましょう。
このコンポーネントは、基本的には上記の例でいうと、3行目にある

<v-dialog>

から 、41行目の

</v-dialog>

の閉じタグでラップされた範囲の要素がダイアログとして表示される範囲になります。
9行目の <v-btn> をクリックすることでダイアログが開く仕組みになっており、このトリガーとなるパーツ（今回の場合はボタン）には、
8行目で指定しているように Vuetify であらかじめ定義されている v-slot を利用する必要があり、関連する v-bind , v-on を12、13行目で指定しておきます。
19行目の <v-card> から、
40行目の </v-card> までの範囲が、ダイアログの実際の中身になります。

ダイアログの開閉については、
32〜36行目の v-btn に
@click=”dialog = false”
と指定してある通り、
あらかじめ Vuejs の data に真偽値(true, false)をとる値を設定しておき、
それが true になったらダイアログが開き、false になったらダイアログが閉じる、
という仕組みになっています。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      dialog: false,
    }
  })
</script>

↑Vue 内の data 定義の例です。このように、最初はfalseの状態で真偽値の値をとるdataを予め定義して起きます。

以上を組み合わせて記述することで、次のサンプルのような表示が可能になります。

実際に動くサンプル

今回も実際に動くサンプルを作成しました。
次のリンクより、確認いただけます。
Vuetifyのサンプル_ダイアログ（モーダル）ウインドウ

そのほかのオプション

この v-dialog ですが、上のような単純に中央にダイアログを表示させることの他にも、
様々なオプション(と言うより、正確には props という概念)が用意されており、とても柔軟なカスタマイズを行うことができます。
たとえば、
・クリックしたら全画面でダイアログがスライドインして開く props（フルスクリーンのダイアログ）
・ダイアログ内でスクロールを可能にする props
・ダイアログ開閉時にトランジションをつける props
・ダイアログをネストさせる props
などがあります。
どれも冒頭にご紹介した基本形の v-dialog の形に、少しコードを書き加えることだけで実装できるので、とても使い勝手が良いです。
・ダイアログ開閉時にトランジションをつける props
を例にとると、

<template>
  <v-dialog
    v-model="dialog"
    transition="dialog-top-transition"
    width="500"
  >
...中略...

このように、 v-dialog に対して、 transition=”dialog-top-transition” という props の指定を加えてあげるだけです。

トランジションの props を加えたサンプル

こちらも実際に動くサンプルを作成しましたので、次のリンクより、確認いただけます。
Vuetifyのサンプル_ダイアログ（モーダル）ウインドウ

公式ドキュメント、APIページについて

v-dialog コンポーネントの Vuetify公式ページは以下になります。
このページに、上でご紹介したフルスクリーンのダイアログの実装サンプルや、ダイアログ内でスクロールを可能にするサンプルなども記載されていますので、一読をおすすめします。
Dialog component — Vuetify

また、各種 props にどんな値を受け渡しができるのか、という部分については、以下の公式APIページに詳細な一覧の記載があります。
v-dialog API

この記事のまとめ

今回は、Vuetify の数々の魅力的なUIコンポーネントのなかから、
ダイアログを実装することができる v-dialog についてご紹介しました。

上記のVuetify公式ページのサンプルにも記載がされている通り、
ダイアログの中にフォームを設置して、ユーザーが値を設定できる入力用ダイアログとして使用したり、
ユーザーになんらかの選択をしてもらうためのダイアログとして使用したり、

ユーザーにアクションをしてもらう際のUIパーツのひとつとして、とても活躍してくれるコンポーネントです。
適切に使うことで、ユーザーに良いWebサイト体験を提供する一助になる、使い勝手の良いUIパーツだと思います。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件