<Teleport> একটি কম্পোনেন্টের মার্কআপ আপনার কম্পোনেন্ট ট্রিতে যেখানে ঘোষণা করা হয়েছে তার ভিন্ন জায়গায় DOM-এ রেন্ডার করে — কিন্তু এটি যুক্তিগতভাবে কম্পোনেন্টের অংশ থাকে (প্রতিক্রিয়াশীলতা, props, ইভেন্ট সবকিছু এখনও কাজ করে)।
মডাল, টুলটিপ এবং নোটিফিকেশনগুলিকে প্রায়ই হতে হয় CSS সমস্যা এড়ানোর জন্য — একটি parent-এর , , বা stacking context একটি মডালকে ক্লিপ বা ভুলভাবে স্তরযুক্ত করতে পারে। কিন্তু যুক্তিগতভাবে, মডাল সেই কম্পোনেন্টের অন্তর্গত যা এটি ট্রিগার করে।
<body> এর সরাসরি childoverflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
মডাল মার্কআপ বাস্তব DOM-এ <body> এর child হওয়ার জন্য স্থানান্তরিত হয়, যেকোনো ক্লিপিং/স্ট্যাকিং parent থেকে পালিয়ে যায় — তবুও open, @click এবং যেকোনো props সম্পূর্ণভাবে প্রতিক্রিয়াশীল থাকে, কারণ যুক্তিগতভাবে এটি এখনও এই কম্পোনেন্টের অংশ।
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
ট্র্যাপিং ancestor থেকে পালিয়ে যাওয়ার মাধ্যমে, মডাল নির্ভরযোগ্যভাবে সম্পূর্ণ viewport কভার করতে পারে এবং একটি অনুমানযোগ্য z-index সহ সমস্ত অন্যান্য বিষয়বস্তুর উপরে বসতে পারে।
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport পরিষ্কারভাবে overlay (মডাল, টুলটিপ, টোস্ট, ড্রপডাউন) এর ক্লাসিক CSS সমস্যা সমাধান করে যা তাদের DOM ancestor দ্বারা ক্লিপ বা ভুলভাবে স্তরযুক্ত হয়।
এটি আপনাকে overlay-কে যেখানে যুক্তিগতভাবে থাকা উচিত সেখানে লেখার অনুমতি দেয় (ট্রিগার করা কম্পোনেন্টের ভিতরে, সম্পূর্ণ প্রতিক্রিয়াশীলতা সহ) যখন এটি DOM-এ যেখানে থাকা প্রয়োজন সেখানে রেন্ডার করে (সাধারণত <body>)।
এটি React portals-এর Vue-এর built-in সমতুল্য — overlay UI তৈরি করার মান, শক্তিশালী উপায়।