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. Vue JS provides a built-in component called <teleport> that will assist us with our noble mission.
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>
What happened? Where did the h1 component go? 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.
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>
Mission accomplished !! Our h1 component has been transported to our other div.
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 learn Vue JS 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 👇
https://www.youtube.com/watch?v=N8BsnTiiuJo&t=248s&embedable=true
Spread the love like a spread operator
[…Love]
Samanja