Vue 3のTeleportでモーダルウィンドウを作成する

0

2024年12月12日 15:15

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

まずはTeleportとは?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

[cv:issue_marketplace_engineer]

# Vue
# Vue.js
# Nuxt.js
0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。