Vue-lazy-renderer NPM

vue-lazy-renderer

Lazily render Vue.js components for performance.

Speed. Use the Intersection Observer API (IO) to prevent performance problems.
Degrade Gracefully. If a user's browser doesn't support the IO, use getBoundingClientRect instead. (vue-lazy-renderer does not load the IO polyfill—it is too fat. You can load it by yourself.)
Lightweight. Only 3.7 kB minified.
Highly Customized. You can globally set several options and locally override them.

npm:

npm install vue-lazy-renderer

Yarn:

yarn add vue-lazy-renderer

Use a plugin to register a global component:

import VueLazyRenderer from 'vue-lazy-renderer';
import Vue from 'vue';

Vue.use(VueLazyRenderer);

Parameter	Description	Type	Default
tagName	The tag name of the root node of `<lazy-renderer>`	String	'div'
preLoad	The proportion of a pre-loading height or width to `window.innerHeight` or `window.innerWidth`	Number	1.5
observerOptions	The Intersection Observer options	Object	{ rootMargin: '0px 50% 50% 0px' }
listenedEvents	The events you want `window` to listen for (used by `getBoundingClientRect`)	Array	'scroll', 'resize', 'orientationChange'
throttledWait	The number of milliseconds to throttle invocations to	Number	100