vue.jsを使ってシングルページアプリケーションを構築するとモーダルウィンドウを使いたいという場面に多々遭遇します。bootstrapのcssフレームワークやVuetifyを利用してマニュアル通りに従うことで簡単に実装することができます。しかしいざという時のためにモーダルウィンドウの作り方を理解して自作できるように知識を深めておきましょう。 本文書では、モーダルウィンドウの作り方からvue.jsのコンポーネントでの実装方法まで入門者でもわかるように説明を行っていきます。利用しているVue.jsのバージョンは2とバージョン3です。バージョン3ではOptinos APIとComposition APIを利用した方法を記述しています。 モーダルウィンドウを作成するためにはvue.jsのいくつかの機能を利用して実装するためモーダルウィンドウについてだけではなく一緒にvue.jsの理解も深まります
![vue.js モーダルウィンドウ実装でコンポーネント理解 | アールエフェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9f8c2095ce02a8688799623199b3c2839ce3b3d/height=288;version=1;width=512/https%3A%2F%2Freffect.co.jp%2Fwp-content%2Fuploads%2F2019%2F06%2Fvue_modal.png)