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:
v3.0.8 (05/09/2023)
- bugfix & refactor
v3.0.5 (05/08/2023)
- bugfix & refactor
v3.0.0/1/2 (05/07/2023)
- bugfix
v2.1.1 (03/15/2023)
- reinforce intersection observer support checking
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