Ensure the target element exists in the DOM before the Teleport renders.
Details
Vue's <Teleport> (Vue 3 built-in) moves rendered DOM nodes to a different location in the document while maintaining the Vue component hierarchy. Events still bubble through the Vue tree (not the DOM tree), and provide/inject still works across the teleport boundary.
Trade-offs:
The target element must exist when the Teleport mounts — SSR requires careful handling
Multiple Teleports to the same target append in order — can cause unexpected stacking
Testing is harder — the rendered content is not in the component's DOM subtree
When NOT to use:
When CSS can solve the positioning problem (e.g., position: fixed with proper z-index)
For SSR-only content — Teleport behavior differs between client and server
When the teleported content does not need to escape its parent — keep it in-place for simplicity
Read the instructions and examples in this document.
Apply the patterns to your implementation, adapting to your specific context.
Verify your implementation against the details and edge cases listed above.
Harness Integration
Type: knowledge — this skill is a reference document, not a procedural workflow.
No tools or state — consumed as context by other skills and agents.
Success Criteria
The patterns described in this document are applied correctly in the implementation.
Edge cases and anti-patterns listed in this document are avoided.
1---2name: vue-teleport-pattern3description: Vue Teleport Pattern4---5# Vue Teleport Pattern67> Render a component's HTML at a different location in the DOM using Vue's Teleport89## When to Use1011- Rendering modals, tooltips, toasts, or dropdowns that need to escape parent CSS overflow or z-index constraints12- Placing UI elements at the end of `<body>` while keeping them logically owned by a child component13- Avoiding CSS stacking context issues with positioned elements1415## Instructions16171. Wrap the content to be teleported in `<Teleport to="selector">`.182. The `to` prop is a CSS selector (e.g., `#modals`, `body`).193. The teleported content remains in the component's logical tree for props, events, and provide/inject.204. Use `<Teleport disabled>` to conditionally render in-place.2122```vue23<template>24 <button @click="showModal = true">Open</button>25 <Teleport to="#modal-container">26 <div v-if="showModal" class="modal">27 <p>Modal content</p>28 <button @click="showModal = false">Close</button>29 </div>30 </Teleport>31</template>32```33345. Ensure the target element exists in the DOM before the Teleport renders.3536## Details3738Vue's `<Teleport>` (Vue 3 built-in) moves rendered DOM nodes to a different location in the document while maintaining the Vue component hierarchy. Events still bubble through the Vue tree (not the DOM tree), and provide/inject still works across the teleport boundary.3940**Trade-offs:**4142- The target element must exist when the Teleport mounts — SSR requires careful handling43- Multiple Teleports to the same target append in order — can cause unexpected stacking44- Testing is harder — the rendered content is not in the component's DOM subtree4546**When NOT to use:**4748- When CSS can solve the positioning problem (e.g., `position: fixed` with proper z-index)49- For SSR-only content — Teleport behavior differs between client and server50- When the teleported content does not need to escape its parent — keep it in-place for simplicity5152## Source5354https://patterns.dev/vue/teleport-pattern5556## Process57581. Read the instructions and examples in this document.592. Apply the patterns to your implementation, adapting to your specific context.603. Verify your implementation against the details and edge cases listed above.6162## Harness Integration6364- **Type:** knowledge — this skill is a reference document, not a procedural workflow.65- **No tools or state** — consumed as context by other skills and agents.6667## Success Criteria6869- The patterns described in this document are applied correctly in the implementation.70- Edge cases and anti-patterns listed in this document are avoided.
Run npx skillmds@latest add intense-visions/vue-teleport-pattern in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Vue Teleport Pattern It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Intense-Visions (@intense-visions) published this skill. Their other Agent Skills are listed on their SkillMD profile.
Intense-Visions