Teleport Target Removal: Does Vue 3 Clean Up Orphaned Components?

Answer

Vue 3 does not automatically unmount a component that has been teleported when the target element is removed from the DOM after the component has mounted. The component instance remains in the Vue instance tree, but its rendered DOM node disappears because the target no longer exists.

Confirmed Facts

• After the target is removed, the teleported element is detached from the document, but the component instance stays mounted.
• Both static (selector string) and dynamic (DOM element) targets exhibit the same behavior; the instance is not destroyed automatically.
• Vue’s devtools still show the component under its original parent in the component tree, confirming that the instance is alive.
• Accessing $el.parentNode after target removal returns null, indicating the DOM node is gone, but the instance remains.

Practical Cleanup Strategy

To avoid memory leaks or stale state, developers should explicitly unmount or hide the teleported component when the target disappears.

1. Use a wrapper component with v-if or v-show: Render the Teleport only when the target exists.

   <template>
     <div v-if="targetExists">
       <Teleport :to="targetSelector">
         <MyComponent />
       </Teleport>
     </div>
   </template>
   

2. Watch the target element: Attach a MutationObserver or listen for a custom event that signals the target’s removal, then set targetExists to false.

   const observer = new MutationObserver((mutations) => {
     if (!document.querySelector(targetSelector)) {
       targetExists.value = false;
     }
   });
   observer.observe(document.body, { childList: true, subtree: true });
   

3. Cleanup on component unmount: In onBeforeUnmount, detach observers or cancel any async tasks to prevent leaks.

Is There a Difference Between Static and Dynamic Targets?

No. Whether you pass a selector string or a DOM element to Teleport, Vue treats the component instance the same way. The only nuance is that with a dynamic element you must ensure the element reference stays valid; otherwise the target resolution will fail silently.

Next Step

To tailor the cleanup approach for your project, please let me know which Vue 3 version you’re running (e.g., 3.0.x, 3.2.x, or the latest 3.3.x). Different patch releases may have minor adjustments to the internal lifecycle handling.