Download
Vue Starport is a library for Vue 3 that allows shared components to animate across route transitions while preserving internal component state. Traditional transitions between routes in Vue often destroy and recreate components, losing state. Starport solves this by hoisting the component to a root level container (<StarportCarrier>), using a proxy at the source and destination positions, and then using Teleport to land the component in its new place. It uses the FLIP (First, Last, Invert, Play) technique: it captures initial position & size, moves the component in a floating state, then lands it into the new layout. This gives a smooth “fly from one page to another” animation effect for components that appear across routes (e.g., a card in list view flying into detail view). It’s especially suited for immersive UI/UX flows in single-page apps built with Vue. The library is experimental and requires Vue 3.
Features
- Allows a component to persist across route transitions instead of re-mounting
- Uses Proxy components to capture position/size and animate between pages
- Built upon Vue’s <Teleport> to re-attach component at target location
- Applies FLIP animation technique to create smooth movement of elements between pages
- Works in Vue 3 environment and supports complex UI where shared components move
- MIT licensed and open source, enabling customization of animation behavior
Project Samples
