Vue 3 — Teleport
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:30:13

---
title: Vue 3 — Teleport
published: true
date: 2020-07-28 01:15:02 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/28/vue-3%e2%80%8a-%e2%80%8ateleport/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258ateleport
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to use the `teleport` component to render elements and components in a different location in the DOM.

### Teleport

We can use the `teleport` component to let us render parts of our Vue template in a location that’s different from its usual location in the DOM

This is handy for creating things like modals and overlays.

The DOM element that we want to render our items in must already exist.

Otherwise, we’ll get an error.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <teleport to="#footer">
        <p>footer</p>
      </teleport>
    </div>

    <div id="footer"></div>

    <script>
      const app = Vue.createApp({});

      app.mount("#app");
    </script>
  </body>
</html>

```

We added the `teleport` component to our template with the `to` prop set to the selector to mount the content inside it.

Therefore, the div with ID `footer` will hold the p element that’s inside the `teleport` component.

### Using with Vue components

If `teleport` has a Vue component, then it’ll remain a child component of the `teleport` ‘s parent.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>
    </div>

    <div id="footer"></div>

    <script>
      const app = Vue.createApp({});

      app.component("parent-component", {
        template: `
          <h2>parent</h2>
          <teleport to="#footer">
            <child-component name="james" />
          </teleport>
        `
      });

      app.component("child-component", {
        props: ["name"],
        template: `
          <div>{{ name }}</div>
        `
      });

      app.mount("#app");
    </script>
  </body>
</html>

```

We put the `parent-component` in the root template of our app.

It has a `teleport` that has `to` set to `#footer` .

So it’ll be rendered in the div with the ID `footer` .

It has the `child-component` inside it.

And that’ll be rendered inside div with ID `footer` also.

### Using Multiple Teleports on the Same Target

We can have multiple teleports with the same selector set as their `to` prop value.

They’ll be rendered by in the order that they’re defined in.

For instance, if we have:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <teleport to="#footer">
        <div>foo</div>
      </teleport>
      <teleport to="#footer">
        <div>bar</div>
      </teleport>
    </div>

    <div id="footer"></div>

    <script>
      const app = Vue.createApp({});

      app.mount("#app");
    </script>
  </body>
</html>

```

Then the rendered result would be:

```
<div id="footer">
  <div>foo</div>
  <div>bar</div>
</div>

```

### Conclusion

The `teleport` component lets us render parts of a Vue template in a location that’s different from the usual location in the DOM.

The post [Vue 3 — Teleport](https://thewebdev.info/2020/07/28/vue-3%e2%80%8a-%e2%80%8ateleport/) appeared first on [The Web Dev](https://thewebdev.info).