Subscribe on changes!

Teleport should provide the option to prepend when there are multiple teleports on the same target

avatar
Jan 29th 2023

What problem does this feature solve?

A simple use case for this feature would be a reusable notification component, that is teleported to a notification-panel component. Ideally, the notification would live in the component that is responsible for its generation, then be teleported to the notification-panel which could contain several notifications simultaneously. In this scenario, it makes sense for the latest notification to be prepended to the top of the notification-panel, rather than being appended to the bottom.

What does the proposed API look like?

A prepend boolean prop on the teleport component (which defaults to false) would be an ideal solution from my perspective.

<teleport to="body" :prepend="true"></teleport>

A more complex alternative solution would be something akin to the order prop used in the portal-vue library, where the render order can be dynamically controlled using an numeric order prop on the teleport component.

<teleport to="body" :order="1"></teleport>
<teleport to="body" :order="-1"></teleport>