Usage

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

idle variant

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

<lazy-component :is-intersected="isIntersected" idle>
  <your-component/>
  
  <!-- Optional -->
  <template #placeholder>
    <span>Loading...</span>
  </template>
</lazy-component>

Props

NameDescriptionTypeDefault
wrapper-tagHtml tag of lazy componentStringdiv
is-intersectedDo not wait observe, Force renderBooleanfalse
idleDo not use observer, wait is-intersected prop changes for renderBooleanfalse
root-marginIntersection Observer API docString0px 0px 0px 0px
thresholdIntersection Observer API docNumber, Array0
See Intersection Observer API doc

Slots

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

Events

intersecteddispatch 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;
}