Render Component When Visible - v-lazy-component

Install & Download:

# NPM
$ npm i v-lazy-component

Description:

The v-lazy-component makes it possible to render components when they are visible using the Intersection Observer API.

How to use it:

1. Import and register the v-lazy-component.

import Vue from "vue";
import LazyComponent from "v-lazy-component";
Vue.use(LazyComponent);
// or locally
export default {
  components: {
    LazyComponent
  }
}

2. Wrap your component into the v-lazy-component.

<lazy-component wrapper-tag="section" @intersected="optionalDispatch">
  <YourComponent />
  Your Component Here
  <!-- Optional loading indicator -->
  <span slot="placeholder">Loading..</span>
</lazy-component>