Vue Teleport

The Vue <Teleport> tag is used to move content to a different place in the DOM structure.

<Teleport> and The 'to' Attribute

To move some content to somewhere else in the DOM structure we use the Vue <Teleport> tag around the content and the 'to' attribute to define where to move it.

<Teleport to="body">
  <p>Hello!</p>
</Teleport>

The 'to' attribute value is given as CSS notation, so if we want to send some content to the body tag like in the code above we simply write <Teleport to="body">.

We can see that the content is moved to the body tag by inspecting the page after it has loaded.

Example

CompOne.vue:

<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>

Run Example »

If we right-click our page and choose 'Inspect', we can see that the red <div> element is moved out of the component and to the end of the <body> tag.

We could also for example have a tag with an id <div id="receivingDiv"> and teleport some content to that <div> by using <Teleport to="#receivingDiv"> around the content we want to teleport/move.

Script and Style of Teleported Elements

Even though some content is moved out of a component with the <Teleport> tag, relevant code inside the component in the <script> and <style> tags still works for the moved content.

Example

Relevant code from the <style> and <script> tags still works for the teleported <div> tag even though it is no longer inside the component after compilation.

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <Teleport to="body">
      <div 
        id="redDiv" 
        @click="toggleVal = !toggleVal" 
        :style="{ backgroundColor: bgColor }"
      >
        Hello!<br>
        Click me!
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleVal: true
    }
  },
  computed: {
    bgColor() {
      if (this.toggleVal) {
        return 'lightpink'
      }
      else {
        return 'lightgreen'
      }
    }
  }
}
</script>

<style scoped>
#redDiv {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

#redDiv:hover {
  cursor: pointer;
}
</style>

Run Example »

❮ Previous Next ❯