Vue-Infinity

Vue Infinity is a modular toolkit designed to help developers build high-performance, memory-efficient, and media-rich applications with Vue. By leveraging smart data fetching and virtualized rendering, it ensures smooth user experiences even with large datasets.

🚀 Key Features:

• 🔄 InfiniteList:
  • Paginated data access
  • Caching with automatic unloading of older pages based on least-recently-used basis
  • Item access by index
  • Auto Pre-fetching and DOM unloading as items/pages approach or move away from the viewport
  • Supports cancellation of in-flight network requests to support rapid scrolling
• 🪂 InfiniteCarousel:
  • Integrates directly with `InfiniteList` for managing data access
  • Customizable number of rows and columns
  • Configurable as a horizontal or vertical scroller
  • Supports custom templates for each item
  • Supports custom loading templates
  • Allows scrolling to any item with CSS-based scroll snapping
  • Supports dynamic item sizing by providing the `onGetItemAspectRatio` prop.
• 🔎 AutoObserver:
  • Automatically observes newly added elements
  • Stops observing removed elements
  • Filters elements to observe using custom logic
  • Cleans up automatically on component unmount
• 👻 Ghost Component:
  • Optimizes performance by conditionally rendering its slot content
  • When off-screen, the content is replaced by an empty placeholder and unloaded from memory
  • This allows you to unload aspects of your interface that are not currently visible
  • Provides hooks for visibility changes