From harness-claude
Renders Vue component HTML at different DOM locations using Teleport to escape parent CSS overflow, z-index, and stacking constraints for modals, tooltips, toasts, dropdowns.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Render a component's HTML at a different location in the DOM using Vue's Teleport
Provides patterns for Vue components including props validation with TypeScript, defaults, emits, slots, and provide/inject. Use when building reusable Vue components.
Enforces Vue 3 best practices with Composition API, <script setup>, and TypeScript. Covers reactivity gotchas, computed properties, performance optimizations, SSR, Volar, vue-tsc for .vue files, Vue Router, Pinia, Vite projects.
Implements Vue renderless components to extract behavior like toggles, fetches, or form validation, delegating all rendering and markup to consumers via scoped slots. For component libraries or Vue 2 patterns.
Share bugs, ideas, or general feedback.
Render a component's HTML at a different location in the DOM using Vue's Teleport
<body> while keeping them logically owned by a child component<Teleport to="selector">.to prop is a CSS selector (e.g., #modals, body).<Teleport disabled> to conditionally render in-place.<template>
<button @click="showModal = true">Open</button>
<Teleport to="#modal-container">
<div v-if="showModal" class="modal">
<p>Modal content</p>
<button @click="showModal = false">Close</button>
</div>
</Teleport>
</template>
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:
When NOT to use:
position: fixed with proper z-index)https://patterns.dev/vue/teleport-pattern