In 3D rendering, we don’t draw the whole world — we only render what the camera can see. What if we applied that same principle to the web?
Instead of rendering your entire UI and letting the user scroll through it, Vue-Infinity flips the model: it renders only what the user can currently see, and unloads everything else. The result is a more memory-efficient, responsive, and browser-friendly interface — especially for feeds, carousels, and scrollable lists.
Traditional virtual scroll libraries do something similar, but often rely on absolute positioning and tightly controlled layouts. That works — but it breaks natural flow, makes scroll snapping unreliable, and complicates styling. Vue-Infinity takes a different approach: it preserves the natural structure of your DOM, ensuring that layouts behave exactly as you’d expect — just with invisible, off-screen parts cleanly stripped away.
⚡ What It Is
A small Vue toolkit that acts like an optimization layer over the DOM:
- 👻
Ghost: Wrap any part of your UI and it’ll automatically unload when it’s no longer visible — freeing up memory while keeping layout stable. - 🪂
InfiniteCarousel: A scrollable component that lets you render unlimited items, while only mounting what’s in view. Easy to style, no absolute positioning tricks.
🧪 Try It Out
Got feedback, ideas, or a use case in mind? I’d love to hear from you.
Top comments (4)
Hey @tanami,
As of right now, the whole page is rendered and maintained in memory at least on desktop. But I agree, this can be done at the browser level, though it will probably need to be opt-in basis as web developers expect the whole dom to be available for the app by default.
There actually was a chrome project mentioned in this video. Though I think it is cancelled or stalled.
But I think even before we reach the browser stage, I think it would be great for some this stuff like ghost especially to be integrated at the framework level as it is such an easy addition...but as an opt-in. Just like we have v-if, v-show...I nominate v-ghost!
Pretty cool seeing this kind of solution for Vue - anything that keeps apps smooth without weird layout hacks is a win in my book.
So it is a trade-off when you have less memory and more compute power? the browser is already pretty good at choosing what needs to be rendered in the current viewport...
Actually you would save on both. The empty placeholder is designed to be minimum cost in memory and rendering cost. To insure smooth transition you can adjust the rootMargin property so that the content starts loading as it nears the viewport