What is Teleport Component in Vue.js 3?

Razet · · 6277 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:

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

How To Install NVM (Node Version Manager) on Ubuntu System?

This tutorial will assist you with installing NVM on the Ubuntu machine. Additionally, allow you to install different node versions and other useful examples.
Harish Kumar

How to Upload Multiple Images with jQuery AJAX and PHP, with preview

Uploading an image without page refresh is more user-friendly than refreshing the entire page. So, in this guide, you will learn how to upload multiple images using ajax in jQuery (...)
Nakul Kumar

Create SPA authentication Using Laravel Sanctum and Vue.js

In this guide, we will focus on SPA authentication in a simple Vue.js app using Laravel Sanctum. Laravel Sanctum provides a featherweight authentication system for SPAs (single (...)
Harish Kumar

Multiple v-model Bindings in Vue 3

In this guide, I will explain the new v-model in Vue 3 and go through a new feature that permits you to utilize various v-model on the same component!
Razet

What is the difference Between watch and watchEffect in Vue.js 3?

There are a few cases where we may need to track a reactive property, and we can do this by utilizing a Vue watcher.
Harish Kumar