/v-lazy-component

Vue component render when visible. Uses Intersection Observer API.

Primary LanguageJavaScriptMIT LicenseMIT

v-lazy-component

npm version npm downloads License

Vue component render when visible. Uses Intersection Observer API.

📖 Release Notes

✨ Demo: https://v-lazy-component.now.sh

🟥 NPM: https://www.npmjs.com/package/v-lazy-component

⬛ Github: https://github.com/RadKod/v-lazy-component

Installation

npm install v-lazy-component --save

Global Register

import Vue from "vue";
import LazyComponent from "v-lazy-component";

Vue.use(LazyComponent);

Local Register

import LazyComponent from "v-lazy-component";

export default {
  components: {
    LazyComponent
  }
}

Via CDN

<script src="https://unpkg.com/v-lazy-component"></script>

<script>
new  Vue({
  el: "#app"
});
Vue.use(LazyComponent);
</script>

Usage

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

Props

Name Type Default
wrapper-tag String div
root-margin String 0px 0px 0px 0px
threshold Number, Array 0
See Intersection Observer API doc

Slots

placeholder Content that is loaded as a placeholder until it comes into view

Events

intersected dispatch event when visible

CSS Selectors

.v-lazy-component.loading {
  filter: blur(20px);
}

.v-lazy-component.loaded {
  filter: blur(0);
  transition: filter 1s;
}

License

MIT License

Copyright (c) RadKod info@radkod.com

Author

👤 selimdoyranli

CREATED BY

RadKod