Complete

public/index.html

@@ -12,6 +12,8 @@
       <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="endofbody"></div>
+    <script src="/dist/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <button @click="toggleModalState">Open modal</button>
+    <teleport to="#endofbody">
+        <Modal v-if="modalOpen" @close="toggleModalState">
+            <p>Hello, I'm a Vue 3 modal window.</p>
+        </Modal>
+        <div class="modal-overlay" v-if="modalOpen"></div>
+    </teleport>
 </template>
-
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+  import useModalState from "@/components/useModalState";
+  export { default as Modal } from "@/components/Modal.vue";
+  export const { modalOpen, toggleModalState } = useModalState();
 </script>
-
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+    .modal-overlay {
+        z-index: 10;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0, 0.3);
+    }
 </style>

src/components/Modal.vue

+<template>
+    <div class="modal">
+        <slot></slot>
+        <button @click="$emit('close')">Dismiss</button>
+    </div>
+</template>
+<script>
+  export default {
+    emits: [ "close" ]
+  }
+</script>
+<style scoped>
+    ::v-slotted(p){
+        font-style: italic;
+    }
+    .modal {
+        width: 200px;
+        max-width: 100%;
+        height: 100px;
+        max-height: 100%;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 20px 50px 20px 20px;
+        z-index: 11;
+        background: white;
+    }
+</style>

src/components/useModalState.js

+import { ref } from "vue";
+export default function () {
+  const modalOpen = ref(false);
+  const toggleModalState = () => {
+    modalOpen.value = !modalOpen.value;
+  };
+  return { modalOpen, toggleModalState }
+};

src/main.js

-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");