--- title: Teleport Preserves Logical Component Hierarchy impact: LOW impactDescription: Understanding that Teleport only changes DOM structure, not Vue's component tree type: best-practice tags: [vue3, teleport, component-hierarchy, props, events] --- # Teleport Preserves Logical Component Hierarchy **Impact: LOW** - A common misconception is that Teleport breaks the Vue component relationship. In reality, `` only alters the rendered DOM structure, not the logical hierarchy. Props, events, provide/inject, and Vue Devtools all work as if the component wasn't teleported. ## Task Checklist - [ ] Continue using props and events normally with teleported components - [ ] Use provide/inject across teleported boundaries - [ ] Check Vue Devtools for component location (shows logical parent, not DOM location) **Key Concept:** ```vue ``` ```vue ``` ## What Teleport Changes vs. Preserves | Aspect | Changed? | Notes | |--------|----------|-------| | DOM position | Yes | Content moves to `to` target | | CSS inheritance | Yes | Styles inherit from new DOM parent | | Props | No | Work exactly as without Teleport | | Events (emit) | No | Bubble through logical hierarchy | | Provide/Inject | No | Work across teleport boundaries | | Vue Devtools | No | Shows logical component tree | | Slots | No | Work normally | | Template refs | No | Parent can ref teleported content | ## Practical Example: Modal with Form ```vue ``` ```vue ``` ## Vue Devtools Behavior In Vue Devtools, teleported components appear under their logical parent: ``` App └── ParentPage └── ModalForm <-- Shows here (logical parent) └── form content ``` Not under their DOM location: ``` // This is NOT how it appears in Devtools body └── ModalForm <-- Does NOT show here ``` ## Reference - [Vue.js Teleport - Component Hierarchy](https://vuejs.org/guide/built-ins/teleport.html#basic-usage)