Vue Starport

Description

Shared Component Across Routes with Animations

It is common for the same component to be used on multiple routes (pages) with slightly different sizes and positions. Often you want to animate these transitions when a user navigates between routes to create a smooth user experience. While such animations are standard in native apps, they can be challenging to implement on the web.

Vue renders components as a tree, where child components reside in separate branches with their own instances. Consequently, navigating between routes does not share component instances; each route has its own copy. This separation prevents direct animation of changes because the elements belong to different instances.

A useful technique called FLIP (First‑Last‑Invert‑Play) can enumerate transitions between these instances. However, FLIP only addresses the visual transition; the underlying components remain distinct, so any internal state is lost during navigation.

To overcome this limitation, I began experimenting with a new approach named Starport, aiming to provide a more effective solution that preserves component identity and state across route changes.

Creator

Anthony Fu
@antfu7