Yes, I am talking about teleporting, not in a Hollywood movie but in real life. We will create an application that will make Benjamin Franklyn teleport back and forth in Vue applications, all with the power of Vue JS. provides a built-in component called <teleport> that will assist us with our noble mission. Vue JS What is Teleport in Vue JS? Teleport is a built-in component in Vue JS that teleports the component outside the original DOM hierarchy of the Vue Application. Your template gets teleported to a new DOM. It is as crazy as teleporting your house with you in it outside of your continent. Let’s create a new Vue application first. I will call mine Benji npm create vue@latest I like to remove all unnecessary stylings and CSS applications before I start. I think it is a good idea as it is very annoying to have them around. I suggest you delete style.css, too. Your main.js file should look something like this. import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app') And erase everything from App.vue and start fresh. Your App.vue should look something like this! <template>
  
</template>

<script>
export default {

}
</script>

<style>

</style> Let’s create two divs and teleport components back and forth within them and learn how to teleport first. Create two boxes in two separate divs in App.vue with stylings like this. <template>
<div>
  <div id="box1">

  </div>
  <div id="box2">

  </div>
</div>
</template>

<script>
export default {

}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
</style> Now, we have a Vue application that looks like this. Let’s create a very simple h1 component inside box1. Like this: <template>
<div>
  <div id="box1">
    <h1>Hello World </h1>
  </div>
  <div id="box2">

  </div>
</div>
</template> Remember, box1 is pink, and box2 is red. Let’s try to teleport this h1 component to the div box2 like this: <template>
<div>
  <div id="box1">
    <Teleport to="#box2">
    <h1>Hello World </h1>
    </Teleport>
  </div>
  <div id="box2">

  </div>
</div>
</template> I don’t see the h1 component at all. It is completely gone and of course it did not transport the h1 component in box2. What happened? Where did the h1 component go? Remember the definition of teleport? It is supposed to teleport the component to the outside of the DOM in a different DOM, not inside divs or anything inside the DOM. So, let’s take our div with id box2 and place it outside our DOM hierarchy, such as this. Go to your index.html page and create box2 div like this. Your index.html page should look something like this. <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="box2"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html> Now, let’s teleport our div of box1 into our div of box2 <template>
<div>
  <div id="box1">
    <Teleport to="#box2">
    <h1>Hello World </h1>
    </Teleport>
  </div>
  
</div>
</template>

<script>
export default {

}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
</style> Our h1 component has been transported to our other div. Mission accomplished !! Time to play with our friend Benji Download an image of Benjamin Franklin, call it Benjamin, and place it in your assets folder. Go to your App.vue page, import, and place the pic in box1. <template>
<div>
  <div id="box1">
    <img :src="this.pic"/> 
  </div>
 
</div>
</template>

<script>
import pic from './assets/benjamin.jpg'
export default {
  data(){
    return{
      pic:pic
    }
  }
}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
</style> Now, we have an image of Benjamin Franklin in our div box1. Let’s make another div outside our DOM for fun in our index.html page. <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html> And add some cool stylings to it. Remember, the style cannot be scoped; if it is scoped, it will not work! Put all the styles in our App.vue page. <style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
#box3{
  background-color: green;
  height:300px;
  width:100%;
}
</style> Time to teleport Benjamin Franklyn to box2 just by using the simple <Teleport> component again <template>
<div>
  <div id="box1">
    <Teleport to="#box2">
    <img :src="this.pic"/>
    </Teleport>
  </div>
  
</div>
</template>

<script>
import pic from './assets/benjamin.jpg'
export default {
  data(){
    return{
      pic:pic
    }
  }
}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
#box3{
  background-color: green;
  height:300px;
  width:100%;
}
</style> And Viola! We have results! Let’s teleport to box3 now! <template>
<div>
  <div id="box1">
    <Teleport to="#box3">
    <img :src="this.pic"/>
    </Teleport>
  </div>
  
</div>
</template>

<script>
import pic from './assets/benjamin.jpg'
export default {
  data(){
    return{
      pic:pic
    }
  }
}
</script>

<style>
#box1{
  background-color: pink;
  width:100%;
  height:300px;
}
#box2{
  background-color: red;
  height:300px;
  width:100%;
}
#box3{
  background-color: green;
  height:300px;
  width:100%;
}
</style> We didn’t just today; we have created art and relived history. Check out my video on Teleporting in Vue JS! I have teleported Benjamin Franklin here as well 👇 learn Vue JS https://www.youtube.com/watch?v=N8BsnTiiuJo&t=248s&embedable=true Spread the love like a spread operator […Love] Samanja

The best videos on the Internet archived and shared on HackerNoon.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Lets Teleport Benjamin Franklin Around Using Vue JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Creating a Racist AI for my Browser with JavaScript and Brain JS

100 Days of Code: Death of Summer on the Island of NixOS

20+ Bootstrap 4 Template for 2020

A Bootcamp Won’t Make You an Engineer

Ask Better Questions, Get Smarter Answers: A Practical Guide for Devs

Creating a Racist AI for my Browser with JavaScript and Brain JS

100 Days of Code: Death of Summer on the Island of NixOS

20+ Bootstrap 4 Template for 2020

A Bootcamp Won’t Make You an Engineer

Ask Better Questions, Get Smarter Answers: A Practical Guide for Devs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps