vue-lazy-renderer

Lazily render Vue.js components for performance.

Feature

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 1.8 kB minified + gzipped.
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

Name	Description
load	Start to load elements wrapped in `<lazy-renderer>`