Vue.js plugin for lazy load with IntersectionObserverApi
Switch branches/tags
Nothing to show
Clone or download
Latest commit 98427c2 Sep 12, 2017
Failed to load latest commit information.
example Update Examplea Sep 12, 2017
src Update Read me Sep 12, 2017
tests init Sep 5, 2017
.babelrc Add babelrc Sep 9, 2017
.gitignore Add test coverage to gitignore Sep 9, 2017
LICENSE Initial commit Sep 5, 2017 Update Read me Sep 12, 2017
package.json Update version Sep 12, 2017
webpack.config.js init Sep 5, 2017
yarn.lock init Sep 5, 2017

Vue.js Lazy This

Lazyloading component using Intersection Observer API. This plugin will help you to show and hide component base on viewport showing


npm install vue-lazy-this


yarn add vue-lazy-this


On javascript file

import LazyThis from 'vue-lazy-this'

Vue.use(LazyThis, options)


const DEFAULT_OPT = {
  config: {
    rootMargin: '50px 0px',
    threshold: 0.01
  minimumIntersectionRatio: 0,
  visible: false,
  autoUnobserve: true

Vue.use(LazyThis, DEFAULT_OPT)

On template

    <img slot="onEnter" src=""/>
    // In case not show on view port yet
    <img slot="onNotEnter" src=""/>



Minimum ratio for intersection for display component

default: 0


Auto UnObserve when Component out of view port. This feature will make component permanently visible after first trigger.

default: true


Support native options for IntersectionObserverAPI follow this link

default: { rootMargin: '50px 0px', threshold: 0.01 }