v-lazy-component

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

• Website: @selimdoyranli
• Github: @selimdoyranli
• LinkedIn: @selimdoyranli
• Team: @RadKod

---

CREATED BY