Open In App

Vue.js Composition API Teleport

Improve
Improve
Like Article
Like
Save
Share
Report

Vue.js is a progressive JavaScript framework for developing web user interfaces. It is a versatile framework providing high speed and performance.  We can create Single Page Applications as well as Full Stack applications.

Vue.js Composition API Teleport is a built-in component in Vue.js. With the help of Teleport, we can port an element to another element. It means although the component doesn’t exist in the DOM, it is loaded from another place and is placed to load on some condition.

The teleport element is useful for popups or modals in applications when you want to get the user’s attention. Teleport needs to know, where the element can be displayed. Here are the following attributes used by the Teleport element.

  • to: Here we need to specify the element on which the teleported element will be rendered. This means that the element on which we want to display should be available at the time of displaying the teleported element.

We can pass values and functions to the teleported element as required.

Syntax: First we define the body where we want to display the element and then teleport the element here as follows: 

<Teleport to="body">
    <!-- Teleport element -->
</Teleport>

Example: In the following example, we have two models, one a simple modal that appears simple and another modal that is situated in another file, which has an animation that teleports to the current body of HTML code.

Step 1: Create a new Vue.js project using the npm node.js package manager.

npm init vue@latest

Enter the project name and preset the project as follows:

 

Project Structure: After successful installation, the following project structure will be formed.

 

Step 2: In the App.vue, create the script setup code where we will set the appearance of the initial modal to false. We will have two models, so according to it, two variables.

App:vue




<script setup>
    import { ref } from "vue";
    const animatedModalVisible = ref(false);
    const simpleModalVisible = ref(false);
</script>


Step 3: In the template section, create the simple modal using Teleport. Also, add the buttons to close and open the modal.

App.vue




<template>
    <center>
        <h1 style="text-align: center; color: green">
          GeeksforGeeks
        </h1>
        <strong>Vue.js Composition API Teleport</strong>
        <br />
        <br />
    </center>
    <center>
        <button @click="simpleModalVisible = true">
            Show Simple Modal
        </button>
        <Teleport to="body">
            <div v-if="simpleModalVisible" 
                 class="modal-wrapper">
                <div class="modal">
                    <h4>Welcome to GeeksforGeeks</h4>
                    <p>This is a Simple Modal</p>
                    <button @click="simpleModalVisible = false">
                      Close
                    </button>
                </div>
            </div>
        </Teleport>
        <!-- Space for Animated Modal -->
    </center>
</template>
<style>
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(172, 172, 172, 0.836);
    }
  
    .modal {
        width: 200px;
        padding: 20px;
        background-color: #fff;
        margin: auto;
        margin-top: 4rem;
        border-radius: 4px;
        text-align: center;
    }
</style>


Step 4: We have added a space for an animated modal. We will create an animated modal in another file called Modal.vue. So create a new file src/Modal.vue and use the transition for animation of the Modal.

Modal.vue




<script setup>
    const props = defineProps({
        visible: Boolean,
    });
</script>
  
<template>
    <Transition name="myModal">
        <div v-if="visible" class="modal-background">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <h4 class="modal-header">
                      GeeksForGeeks
                    </h4>
                    <p class="modal-body">
                      A computer science portal for geeks.
                    </p>
  
                    <button @click="$emit('close')">
                      Close
                    </button>
                </div>
            </div>
        </div>
    </Transition>
</template>
  
<style>
    .modal-background {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(133, 133, 133, 0.5);
        display: table;
        transition: opacity 0.3s ease;
    }
  
    .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
  
    .modal-container {
        width: 300px;
        margin: 4rem auto;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease;
    }
  
    .modal-header {
        margin-top: 0;
        color: #42b983;
    }
  
    .modal-body {
        margin: 20px 0;
    }
  
    .myModal-enter-from,
    .myModal-leave-to {
        opacity: 0;
    }
  
    .myModal-enter-from .modal-container,
    .myModal-leave-to .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>


Step 6: Import the Modal.vue in the App.vue and then place the Teleport element as we have done for the simple modal.

App.vue




<script setup>
    import Modal from "./Modal.vue";
    import { ref } from "vue";
    const animatedModalVisible = ref(false);
    const simpleModalVisible = ref(false);
</script>
  
<template>
    <center>
        <h1 style="text-align: center; color: green">
          GeeksforGeeks
        </h1>
        <strong>Vue.js Composition API Teleport</strong>
        <br />
        <br />
    </center>
    <center>
        <button @click="simpleModalVisible = true">
          Show Simple Modal
        </button>
        <Teleport to="body">
            <div v-if="simpleModalVisible" class="modal-wrapper">
                <div class="modal">
                    <h4>Welcome to GeeksforGeeks</h4>
                    <p>This is a Simple Modal</p>
                    <button @click="simpleModalVisible = false">
                      Close
                    </button>
                </div>
            </div>
        </Teleport>
        <br />
        <br />
        <button @click="animatedModalVisible = true">
          Show Animated Modal
        </button>
        <Teleport to="body">
            <Modal :visible="animatedModalVisible" 
                   @close="animatedModalVisible = false" />
        </Teleport>
    </center>
</template>
<style>
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(172, 172, 172, 0.836);
    }
  
    .modal {
        width: 200px;
        padding: 20px;
        background-color: #fff;
        margin: auto;
        margin-top: 4rem;
        border-radius: 4px;
        text-align: center;
    }
</style>


Step 7: Run the project using the following command and see the output.

npm run dev

It will run the project on http://localhost:3000/ and the result will be as follows.

Output:

 

Reference: https://vuejs.org/guide/built-ins/teleport.html#teleport



Last Updated : 21 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads