Normally, when we create components in Vue they naturally appear within the DOM structure where we'd expect them to be. However, sometimes this doesn't make sense. A good example of this is a modal - , a modal should appear on top of everything on the page - so if we create it within a component where it logically makes sense, it may appear behind certain HTML elements or require some weird CSS styling to get it to the top. normally Fortunately, there is an easy way to solve for this problem in Vue, called . The tag lets us define something within a component, and then it anywhere we want in the code. Let's look at how it works. <Teleport> <Teleport> "teleport" How Teleport works in Vue Suppose we have a simple component in Vue called which contains a modal. It looks a little like this: Modal.vue <script> export default { data() { return { display: false } } } </script> <template> <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button> <div class="modal" v-if="display"> My Modal </div> </template> In our structure, this modal sits quite deep in our application structure: Since is so deep in our structure, it may not appear on top of the rest of our content as we want. As such, we'd ideally want it to be a direct child of the tag. Using , We can adjust our component to it to be a direct child of the tag like so: Modal.vue body <Teleport> "teleport" body <script> export default { data() { return { display: false } } } </script> <template> <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button> <Teleport to="body"> <div class="modal" v-if="display"> My Modal </div> </Teleport> </template> The attribute of is expected to be a valid CSS selector. Now our div will be teleported to be a direct child of the body, so it will always appear on top, rather than being deeply nested within our Vue structure. to Teleport .modal Disabling a Teleport tag We can disable a tag based on certain logic using the attribute. For example, we could check for the value of being set to true, by using the following code: Teleport :disabled myToggle <Teleport :disabled="myToggle"></Teleport> Above, if is set to , the simply won't work, meaning we can only enable it when we want to. As such, is a very useful tag in Vue for adjusting and we see certain content. It's also OK to use multiple tags within the same Vue template. myToggle true Teleport Teleport where when Teleport
