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

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Learn how to continuously improve your codebase

Vue: How To Use The Teleport Command

Vue: How To Use The Teleport Command

Too Long; Didn't Read

Company Mentioned

@smpnjn

RELATED STORIES