Render Component When Visible – v-lazy-component

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>

Preview:

Changelog:

v2.1.1 (03/15/2023)

• reinforce intersection observer support checking

v2.1.0 (02/13/2022)

• Force render feature
• Idle feature
• CSS BEM

Download Details:

Author: RadKod

Live Demo: https://v-lazy-component.vercel.app/

Download Link: https://github.com/RadKod/v-lazy-component/archive/refs/heads/master.zip

Official Website: https://github.com/RadKod/v-lazy-component

Install & Download:

# NPM
$ npm i v-lazy-component