<template> <h1>Teleport</h1> <p>With &lt;teleport to="body"&gt; we move the red &lt;div&gt; from inside the component to the body tag.</p> <comp-one></comp-one> </template> <script></script> <style> #app { width: 350px; margin: 10px; } #app > div { border: solid black 2px; padding: 10px; margin-top: 10px; background-color: rgb(186, 228, 255); } h2 { text-decoration: underline; } </style>

 <template> <div> <h2>Component</h2> <p>This is the inside of the component.</p> <Teleport to="body"> <div id="redDiv">Hello!</div> </Teleport> </div> </template> <script></script> <style scoped> #redDiv { background-color: lightcoral; margin: 10px; padding: 10px; display: inline-block; } </style>

 import { createApp } from 'vue' import App from './App.vue' import CompOne from './components/CompOne.vue' const app = createApp(App) app.component('comp-one', CompOne) app.mount('#app')