Do you think IIT Guwahati certified course can help you in your career?
Introduction
You must be familiar with the word teleport and its meaning. You have seen it in Sci-fi movies. At least once in your lifetime, you must have wished for yourself to get teleported to your favourite destination or person! Unfortunately, there is no means of teleportation in the real world. But the good news is, Vue.js has Teleport! Vue.js Teleport instantly renders components and HTML elements from one component to another! Though it won’t teleport us, we are one step closer to teleportation!
From this article, we will learn what teleport is in Vue.js, why we need it, and how to use it. So, let’s teleport to the next section of this article!
<teleport> is a Vue 3 component that helps render HTML elements from one component to a different part of the code. It allows you to move an object from one place to another. In Vue JS terms, it allows you to define a component in one place, and render it in a different position in the DOM tree, even outside the scope of the Vue app. As you can see in the diagram below, div is inside the Header component. However, if we put this div inside the teleport tags, we can instantly transfer the div to the Body component.
<div>Content you want to render in #destination</div>
</teleport>
The properties of teleports are:
to: its value is the place or target where you want to teleport or render your code. The value of this property can be an Id selector, class selector, data-attribute selector, or reactive property.
disabled: its value can be either true or false. If it is true, the teleport will be disabled, and thus, the contents of the teleport tags will be rendered where they are written. If it is false, then the contents will be rendered in the value of “to” property.
How to use Teleport?: Code
We will make a task manager to see how to use teleport. Create a new Vue project named task-teleport by using the following command in the terminal:
vue create task-teleport
Go into your task-teleport folder using the cd command and run the following command:
npm run serve
This will start your app on localhost:8080.
Delete the HelloWorld.vue file and replace it with Tasks.vue file so that your project structure looks like this:
index.html
In this file, we have a div of id “completed-tasks”. We will render all the completed tasks from the Tasks.vue to this div using teleport.
We have put a div inside the teleport tags. This div contains a task and a button with click event “taskhandler1()”. Note that the “taskhandler1” function makes the value of the disabled property toggle from true to false and false to true. If disabled is false, it renders the task in “completed-tasks” div.
When we click the done button, the disabled property of Teleport becomes false, and thus, the task gets rendered in the completed tasks div:
When we click on undo button, the disabled property becomes true again and the task gets rendered where it was described, that is, inside the “tasks to do”.
Multiple Teleports
Let us see whether having multiple Teleports directed to the same target work or not. In the previous example of “Task Manager”, make changes to the Tasks.vue file:
Clicking done sends the task to the completed tasks list, and clicking undo sends them back:
Therefore, we see that it can handle multiple Teleports to the same destination.
Why do we need Teleport?
We know that Vue.js is a front-end framework that helps make the code maintainable and readable by dividing our App into components. Each component may have methods, props, data, etc. These components are reusable. With Vue.js, the structure of the App reflects in the code, as shown below:
We place a component inside another component if logic says so.
For instance, in the above structure, the Navbar component is supposed to have Button components. So, logically, we will place the Button component inside the Navbar.
However, although one component should be registered inside another by logic, we cannot always do that. Why? Because it may make coding difficult for us! For instance, when we make a modal, it logically belongs to our main body. However, we write its HTML code outside the body to make the CSS code for its placement easy.
Practical application of Teleport: Modal
Create a new app using vue create modal-teleport command in terminal. Clean up the app and make a new file to make the file structure look like this:
When does Teleport not work? The target element must exist before the component is mounted otherwise, the Teleport won’t work. The target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree.
How can we use Teleport in Vue 2? Vue 2 does not support Teleport. However, we can use an alternative for it, the portal-vue component. It can be installed by writing npm install portal-vue --savecommand on the terminal.
Why do we want our modal to be rendered outside the Vue component tree? We should render our modal outside the Vue component tree to avoid any interference with other applications’ UI components. For this reason, it is recommended to put it below the body tag in the index.html file of your public directory.
Key Takeaways
From this article, we learned what Teleport is, its properties, and how to use it. We learned why and when it should be used. We also saw a few practical examples of using Teleport. Do you want to learn more about Vue.js? You can read our blogs on Vue.js or take our highly curated Web Development course.
34+ registered 
