v-lazy-component

Vue component render when visible.

Usage no npm install needed!

<script type="module">
  import vLazyComponent from 'https://cdn.skypack.dev/v-lazy-component';
</script>

README

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

yarn add v-lazy-component  # or 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>

idle variant

....
<button @click="isIntersected = true">Click for Render</button>

<lazy-component :is-intersected="isIntersected" idle>
  <YourComponent />
  
  <span slot="placeholder">Loading..</span> <!-- Optional -->
</lazy-component>

Props

|Name|Description|Type|Default |--|--|--|--| |wrapper-tag |Html tag of lazy component|String | div |is-intersected |Do not wait observe, Force render |Boolean | false |idle |Do not use observer, wait is-intersected prop changes for render |Boolean | false |root-margin |Intersection Observer API doc|String | 0px 0px 0px 0px |threshold |Intersection Observer API doc|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.v-lazy-component--loading {
  filter: blur(20px);
}

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

License

MIT License

Copyright (c) RadKod info@radkod.com

Author

👤 selimdoyranli

CREATED BY

RadKod