vGhost – new Vue directive to unload offscreen elements without breaking layout

Isaac Tewolde — Fri, 04 Jul 2025 09:13:47 +0000

Just released a major new feature: v-ghost, a new Vue directive that automatically unloads elements when they scroll out of view — without breaking layout or scroll position.

You can now keep your DOM light without needing wrapper components or manual logic. Just drop v-ghost on any element:

<template>
  <video v-ghost>
    <source src="your-video.mp4" type="video/mp4" />
  </video>
</template>

Keep your app trim without effort —
kind of like Ozempic for Vue apps 😄

📦 v0.7.2 release notes

🔗 GitHub repo

Vue-Infinity: Visibility-Based Rendering for Vue

Isaac Tewolde — Wed, 18 Jun 2025 14:58:07 +0000

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

🔗 Read the full deep-dive
🔗 GitHub Repo

Got feedback, ideas, or a use case in mind? I’d love to hear from you.

Forem: Isaac Tewolde

vGhost – new Vue directive to unload offscreen elements without breaking layout

Vue-Infinity: Visibility-Based Rendering for Vue

⚡ What It Is

🧪 Try It Out