What is Teleport Component in Vue.js 3?

Razet · · 8927 Views

Vue 3 provides the <teleport> component. Here in this post, I will show you how to use the <teleport> component in your Vue.js 3 project.

Vue's components allow us to create our UI into components that wonderfully put together our business logic and presentation layer. However, sometimes one component has some HTML that requirements to get rendered in an alternative area.

The solution Vue 3 gives is the Teleport component. Previously this was named "Portal," but the name was changed to Teleport. So, as not to conflict with the future <portal> element which may someday be a part of the HTML standard.

<teleport> has two properties:

to: This necessary property indicates the area in DOM where it renders the content of the <teleport> component. The value can be any of the following variations below:

  1. ID Selector: <teleport to="#location-in-dom">...</teleport> 

  2. Class Selector: <teleport to=".location-in-dom">...</teleport> 

  3. Data-Attribute Selector: <teleport to="[data-area in-dom]">...</teleport> 

  4. Reactive Property: <teleport :to="locationInDom">...</teleport> 

disabled: This optional property, when assigned a value of true, disables the state of the <teleport> component. In a disabled state, its content is rendered in the same area where it's defined. When the disabled property is assigned a value of false, which is the default, the content is rendered in the DOM location specified in the to property. 

When you need the <teleport> part to be disabled but not rendering anything to the DOM, you may utilize v-if, the Vue JS Directive, to hide it and prevent it from rendering.

Teleport Example:

For <teleport> example, first let's create modal component. So, create a new Vue component named Modal.vue. And add the following code in that component.

<template>
  <div>
    <h1>Demonstrating Teleporting in Vue 3</h1>
    <teleport to="#modal-area">
      <Modal @close-modal="closeModal">
        <template #body>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
        </template>
      </Modal>
    </teleport>
  </div>
</template>

<script>
import Modal from "./components/Modal.vue";

export default {
  name: "App",
  components: {
    Modal,
  },
  methods: {
    closeModal() {},
  },
};
</script>

In this modal component, we have three sections using <slot>, representing the header, body, and footer

The use of <slot> components to add flexibility. You can learn more about Slots in this video:

  1. Vue.js Slots 

Now we want the Modal component should be rendered inside the <div id=”modal-area”/> outside the scope of the Vue 3 app and inside the <body> element of the index.html page.

The contents of the /public/index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <div id="modal-area"></div>
  <!-- built files will be auto injected -->
</body>

</html>

Let's run the app and see it in action!

The Modal component is now rendered inside the <div id=”modal-area”/> outside the scope of the Vue 3 app and inside the <body> element of the index.html page.

What is Teleport Component in Vue.js 3?
0

Please login or create new account to add your comment.

0 comments
You may also like:

The Ultimate Guide to Mobile Game Development in 2023

Did you know that a game is a composition of all the modern aspects that are important for humans in today's world. It includes programming, art design, music, writing, and much (...)
Kenny William

How 2D Game Development Company is Helpful To Develop Excellent Mobile Games in 2023?

A reliable 2D game development company can be very helpful in developing outstanding mobile games because of their specialized expertise and experience in the domain. Here are (...)
Kenny William

Learn PHP Development from beginning.

PHP stance Hypertext Preprocessor, it's server-side scripting laungage and easy to use. PHP  also well  known for its speed, simplicity, flexibility features that have made it (...)
Programmer Desk

How to Create a Mobile App Using JavaScript: Step by Step Guide for 2023

How to Create a Mobile App Using JavaScript: Step by Step Guide for 2023
James Smith

Types of Instacart Clone Apps To Power Your Next Grocery Business

The Instacart app has been widely successful in delivering products on time. Not only are the items delivered safely, but they are also picked up by a specially assigned shopper. (...)
Narola Infotech

Vuex Tutorial: Learn State management in Vue.js using Vuex

The objective of this Vuex tutorial is to give you an essential understanding of state management in Vue.js using Vuex by creating a relatable example. By the end of this tutorial, (...)
Harish Kumar