Teleportを使うことで、モーダルウィンドウを簡単に作成することができるようになりました。
Vue 3では、以前まで使われていたPortalというAPIは廃止され、その機能はTeleportに統合されました。
それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。

まずはTeleportとは？

Teleportは、Vue 3で追加された新しい機能の1つです。
これは、アプリケーションのルート要素以外の場所に、コンポーネントをレンダリングするためのものです。
具体的には、モーダルウィンドウやドロップダウンメニューなど、アプリケーションのルート要素の外に表示したいものを簡単に実現することができます。

それでは、Teleportを使ってモーダルウィンドウを作成してみましょう。

モーダルウィンドウを作成する

まずは、Vue 3のプロジェクトを作成し、必要なパッケージをインストールします。

次に、モーダルウィンドウ用のコンポーネントを作成します。

次に、モーダルウィンドウを表示するためのボタンを作成します。

ここまでのコードをApp.vueに追加し、表示してみると、ボタンをクリックするとモーダルウィンドウが表示されます。

しかし、このままだとモーダルウィンドウがアプリケーションのルート要素の中に表示されてしまいます。
ここで、Teleportを使ってモーダルウィンドウをルート要素の外に表示することで、より自然な動作を実現できます。

Teleportを使ってモーダルウィンドウをルート要素の外に表示する

まずは、Modal.vueのテンプレートにTeleportを追加します。

次に、モーダルウィンドウを表示するためのボタンをクリックした時に、Teleportを使ってモーダルウィンドウを表示するように変更します。

これで、モーダルウィンドウがルート要素の外に表示されるようになりました。

モーダルウィンドウを閉じる

Teleportを使ってモーダルウィンドウを表示した後、どのようにして閉じることができるのでしょうか。
モーダルウィンドウの外をクリックすることで閉じるようにしたいと思います。

まずは、Modal.vueのテンプレートに、外側をクリックした時に親コンポーネントのisOpenをfalseにするように変更します。

次に、親コンポーネントのModal.vueの呼び出し部分を、v-modelを使ってisOpenを双方向バインディングします。

これで、モーダルウィンドウの外をクリックすると自動的に閉じるようになりました。

まとめ

Teleportを使うことで、ルート要素の外にコンポーネントをレンダリングすることができるようになりました。
これにより、以前までのPortalと比べてより簡単にモーダルウィンドウなどを作成することができるようになりました。
また、v-modelを使うことで、コンポーネントの双方向バインディングを実現し、モーダルウィンドウの外をクリックすることで自動的に閉じるようにすることもできました。

これからは、Teleportを使ってより使いやすいアプリケーションを作成していきましょう。

[cv:issue_marketplace_engineer]