Teleport with Vue.js
If you’ve ever seen Star Trek, you might be familiar with the general concept of teleportation. Merriam-Webster defines teleportation as “the act or process of moving an object or person by psychokinesis” or “instantaneous travel between two locations without crossing the intervening space”. What we’ll be talking about today will not involve psychokinesis, because unfortunately we can’t move items within the DOM with our minds alone. That’s why Vue.js developed the Teleport feature that was released in Vue 3.
The key to this feature is that it allows you to render content at a different location (hence the name Teleport) within the DOM, outside of the component’s parent hierarchy. This prevents CSS styles from overlapping and overriding your intended styles or positioning, which can be a great benefit!
Because Teleport targets individual components, you can reuse elements in different places on your web application without worrying about the context of where you place it. Also, you can control when these components appear and how they behave because they are individual components and not tied to standard layout hierarchy.
Per Vue’s website, “Teleport only alters the rendered DOM structure – it does not affect the logical hierarchy of the components. That is to say, if Teleport contains a component, that component will remain a logical child of the parent component containing the Teleport. Props passing and event emitting will continue to work the same way.”
Teleport is typically used within the Vue framework when creating things like pop-ups, modals, banners, or tooltips.
To use Teleport, wrap whatever you want to ‘teleport’ within a Teleport tag like this:
<template>
<div>
<button @click=”toggleModal”>Open Modal</button>
<teleportto=”body”>
<divv-if=”isModalOpen”class=”modal”>
…
</div>
</teleport>
</div>
</template>
Dynamically Disable the Teleport Feature
Sometimes a feature isn’t necessary. If you want to disable Teleport, you can dynamically do so by detecting media query changes:
<Teleport :disabled=”isMobile”>
…
</Teleport>
Multiple Teleports to the Same Target
If you want to conduct multiple Teleports on the same target, structure your code like this:
<Teleportto=”#modals”>
<div>First Div</div>
</Teleport>
<Teleportto=”#modals”>
<div>Second Div</div>
</Teleport>
Animate your Teleported Modals
You can animate your modals by combining Teleport with the Transition feature which is a built-in component that can help work with transitions and animations what an element’s state is changed.
Teleport Considerations:
When using the Vue.js Teleport feature, remember to implement screen reader accessibility. Here’s how you can do that with your teleport component:
<div aria-live=”assertive” aria-label=”Open Modal”>
<teleport to=”body”>
…
</teleport>
</div>
- Keep in mind that this feature works best on modern browsers, but if you expect a lot of your users to be working from older browsers, it may be worth exploring alternatives to Vue Teleport.
- You must be using Vue 3, and any previous versions of Vue will not be compatible with this feature.
- According to Vuejs.org, The teleport ‘to’ target must be already in the DOM when the Teleport component is mounted. Ideally, this should be an element outside the entire Vue application. If targeting another element rendered by Vue, you need to make sure that element is mounted before the Teleport.
Sources: