Vue.js Composition API multiple teleports with same target elements
Last Updated :
12 Apr, 2022
Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.
Composition API Teleports allows transferring a piece of code where it does not need to exist. It is a built-in component in Vue.js that exists outside of the DOM hierarchy but can port some elements in the DOM tree. We can use it to create modals, a screen that appears on top of the webpage to attract the attention of the users.
Composition API Multiple Teleports to the same target elements means we can teleport different content to the same element. The application of multiple teleports is to create a reusable Modal component that appears in the same way across the application.
Vue.js Composition API Multiple Teleports Attributes:
- to: This attribute transfers the piece of code in the teleport to the mentioned element in the list.
Syntax: For creating multiple teleports with the same target, we mention the same target element in the to attribute of teleport.
<Teleport to="#modal-container">
<div>First Modal</div>
</Teleport>
<Teleport to="#modal-container">
<div>Second Modal</div>
</Teleport>
Example: In the following example, we have three modals, which we will transfer to a div element in the index.html file without placing the code in the index.html file. Hence we will multiple teleports into the same target element.
Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.
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.
Project Structure
Step 2: In the index.html file, create a new div container and give it the id of the modal-container. This will hold the modals that we will teleport to. So add the new container after the div container with id of the app as follows:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
</head>
<body>
<div id="app"></div>
<div id="modal-container"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
|
Step 3: In the App.vue file, in the script setup section, add the boolean variables initially set to false responsible for the visibility of the modals.
App.vue
<script setup>
import { ref } from "vue";
const modal1 = ref(false);
const modal2 = ref(false);
const modal3 = ref(false);
</script>
|
Step 4: In the template section of the App.vue file, add the three Teleport elements with some modal content as follows:
App.vue
<template>
<center>
<h1 style="text-align: center;
color: green">GeeksforGeeks</h1>
<strong>
Vue.js Composition API multiple teleports
with same target elements
</strong>
<br />
</center>
<center>
<button @click="modal1 = true">Data Structures</button>
<button @click="modal2 = true">Machine Learning</button>
<button @click="modal3 = true">Algorithms</button>
<Teleport to="#modal-container">
<div v-if="modal1" class="modal-wrapper">
<div class="modal">
<h4>Welcome to GeeksforGeeks</h4>
<p>Tutorial on Data Structures</p>
<button @click="modal1 = false">Close</button>
</div>
</div>
</Teleport>
<Teleport to="#modal-container">
<div v-if="modal2" class="modal-wrapper">
<div class="modal">
<h4>Welcome to GeeksforGeeks</h4>
<p>Tutorial on Machine Learning</p>
<button @click="modal2 = false">Close</button>
</div>
</div>
</Teleport>
<Teleport to="#modal-container">
<div v-if="modal3" class="modal-wrapper">
<div class="modal">
<h4>Welcome to GeeksforGeeks</h4>
<p>Tutorial on Algorithms</p>
<button @click="modal3 = false">Close</button>
</div>
</div>
</Teleport>
</center>
</template>
|
Step 5: Add the styles required for the Teleport modals in the App.vue file.
App.vue
<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>
|
Here is the full code for App.vue.
App.vue
<script setup>
import { ref } from "vue";
const modal1 = ref(false);
const modal2 = ref(false);
const modal3 = ref(false);
</script>
<template>
<center>
<h1 style="text-align: center;
color: green">GeeksforGeeks</h1>
<strong>
Vue.js Composition API multiple teleports with same target
elements</strong>
<br />
</center>
<center>
<button @click="modal1 = true">Data Structures</button>
<button @click="modal2 = true">Machine Learning</button>
<button @click="modal3 = true">Algorithms</button>
<Teleport to="#modal-container">
<div v-if="modal1" class="modal-wrapper">
<div class="modal">
<h4>Welcome to GeeksforGeeks</h4>
<p>Tutorial on Data Structures</p>
<button @click="modal1 = false">Close</button>
</div>
</div>
</Teleport>
<Teleport to="#modal-container">
<div v-if="modal2" class="modal-wrapper">
<div class="modal">
<h4>Welcome to GeeksforGeeks</h4>
<p>Tutorial on Machine Learning</p>
<button @click="modal2 = false">Close</button>
</div>
</div>
</Teleport>
<Teleport to="#modal-container">
<div v-if="modal3" class="modal-wrapper">
<div class="modal">
<h4>Welcome to GeeksforGeeks</h4>
<p>Tutorial on Algorithms</p>
<button @click="modal3 = false">Close</button>
</div>
</div>
</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 6: Run the project using the following command and see the output.
npm run dev
Output: On successfully building the project, open http://localhost:3000, and the result will be as follows.
Reference: https://vuejs.org/guide/built-ins/teleport.html#multiple-teleports-on-the-same-target
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...