66

Author: kossiecoder

public/index.html

@@ -13,6 +13,7 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <div id="modal"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/components/TodoList.vue

@@ -31,11 +31,13 @@
         </div>
       </div>
     </div>
-    <Modal 
-      v-if="showModal"
-      @close="closeModal"
-      @delete="deleteTodo"
-    />
+    <teleport to="#modal">
+      <Modal 
+        v-if="showModal"
+        @close="closeModal"
+        @delete="deleteTodo"
+      />
+    </teleport>
 </template>
 
 <script>

src/pages/todos/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="opacity: 0.5">
     <div class="d-flex justify-content-between mb-3">
       <h2>To-Do List</h2>
       <button