refactor: create a div to teleport modals to

hecticme · hecticme · commit c75880ca1640 · 2024-04-02T09:37:48.000+07:00
This commit created a container `div` outside of Vue app to store teleported modal components. It has to be outside of the Vue app, else it won't work because it has not been mounted yet. See more -> vuejs/core#2015
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <div id="modal-container"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/components/ModalConfirmation.vue b/src/components/ModalConfirmation.vue
@@ -26,7 +26,7 @@ const modalTitle = computed(() => pomodoro.isBreak
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport to="#modal-container">
     <Transition
       :duration="250"
       name="fly-in"
diff --git a/src/components/SettingsForm.vue b/src/components/SettingsForm.vue
@@ -87,7 +87,7 @@ function onAfterLeave () {
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport to="#modal-container">
     <Transition
       :duration="250"
       name="fly-in"
