vue.jsにてモーダルの実装

cssでのハンガーバーメニューと考え方はほぼ同じだが、実装がだいぶ楽。
ついでにbulma(cssフレームワーク)も使えばレイアウトも簡単。
というかbulmaのモーダルのドキュメントに＠clickイベントいくつか付けるだけでできる。
(vueの方でmodalプロパティも必要)

<button @click="modal=true" class="button">モーダルを開く</button>
<div class="modal" v-show="modal">
  <div class="modal-background" @click="modal=false"></div>
  <div class="modal-content">
    <!-- 中身ーvue.jsのslot 使うと汎用性高し -->
  </div>
  <button class="modal-close is-large" aria-label="close" @click="modal=false"></button>
</div>

1点注意
modalクラス付けるとdisplay:noneがあるせいでうまく動かないからそれを消す必要がある。
.modal{display:block;}