LinusBorg/portal-vue
Portal Vue
Portal-vue is a library for rendering Vue component content into arbitrary DOM elements outside their original parent-child hierarchy. It functions as a DOM teleportation tool and cross-component content injector, allowing developers to decouple a component's logical position in the application tree from its physical location in the document.
The tool specifically enables the injection of dynamic interface elements, such as modals and tooltips, into root-level containers. This mechanism allows visual templates to bypass CSS nesting and layout constraints by separating the visual location from the structural hierarchy.
The library manages the transport of visual elements while preserving original component state and reactivity. It synchronizes the mounting and unmounting of remote content with the source component's lifecycle.
Features
- Cross-Component Injectors - Provides a system for injecting dynamic interface elements such as modals and tooltips into root-level containers.
- Hierarchical DOM Decoupling - Implements architectural separation between a component's logical hierarchy and its physical DOM location.
- Dynamic Element Injection - Injects dynamic Vue interface elements into arbitrary DOM targets while maintaining a synchronized lifecycle.
- Teleportation Utilities - Moves component content to different document locations to bypass parent layout constraints while preserving state.
- Out-of-Parent Rendering - Allows visual templates to be rendered in different parts of the document to bypass nesting and layout constraints.
- Structural Hierarchy Decoupling - Injects visual templates into specific document elements to separate visual location from structural hierarchy.
- UI Element Injection - Injects component templates into specific named DOM containers to bypass CSS nesting and layout constraints.
- UI Element Injections - Transports specific document elements from a source component into designated destinations elsewhere in the page.
- Lifecycle-Synced Mounting - Synchronizes the mounting and unmounting of teleported content with the source component's framework lifecycle.
- DOM State Preservation - Preserves the original logical state and data context when transporting visual elements to different DOM locations.
- Portal Libraries - Renders Vue component content into arbitrary DOM elements outside their original parent-child hierarchy.
- Virtual-to-DOM Mappings - Maps internal component structures to external document locations to maintain reactivity across detached elements.
- Decoupled Architectures - Separates where a Vue component lives in the logic tree from where it appears in the final document structure.
- Vue.js Layout Utilities - Moves component templates to different parts of the page to bypass CSS nesting and layout constraints.
- Vue.js Modal Libraries - Renders overlay elements like modals and tooltips at the application root to avoid clipping issues.
