Habr<p>Vue Teleport: как работает</p><p>Привет, Хабр! Сегодня разберём один из недооценённых, но крайне полезных инструментов во Vue 3 — <Teleport> . Это встроенный механизм, который позволяет рендерить часть шаблона вне текущего DOM‑контекста. Он нужен при реализации модалок, тултипов и других компонентов, которые должны «выпрыгивать» из дерева компонентов, но при этом сохранять реактивность, фокус и доступность. Без этих костылей, z-index: 9999 и appendChild .</p><p><a href="https://habr.com/ru/companies/otus/articles/922610/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">habr.com/ru/companies/otus/art</span><span class="invisible">icles/922610/</span></a></p><p><a href="https://zhub.link/tags/vuejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vuejs</span></a> <a href="https://zhub.link/tags/Vue_3" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_3</span></a> <a href="https://zhub.link/tags/Vue_Teleport" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Vue_Teleport</span></a> <a href="https://zhub.link/tags/Virtual_DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Virtual_DOM</span></a> <a href="https://zhub.link/tags/useFocusTrap" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>useFocusTrap</span></a> <a href="https://zhub.link/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a></p>