v-lazy-component

v-lazy-component

Vue component render when visible ️

Website

Features

• ️ Lightweight
• Interactive
• Easy implementation
• Vue2 & Vue3 support

Getting Started

Try it Online ️

DEMO

Installation

yarn add v-lazy-component  # or npm i v-lazy-component

Vue3

Global Register

import { createApp } from 'vue'
import App from './App.vue'
import LazyComponent from 'v-lazy-component'

const app = createApp(App)

app.use(LazyComponent)
app.mount('#app')

Local Register

<script setup>
import LazyComponent from 'v-lazy-component'
</script>

Via CDN

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

<script>
  const app = Vue.createApp({})
    
  app.use(LazyComponent)
  app.mount('#app')
</script>

Vue2

Global Register

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

Vue.use(LazyComponent);

Local Register

import LazyComponent from "v-lazy-component/vue2";

export default {
  components: {
    LazyComponent
  }
}

Via CDN

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

<script>
new  Vue({
  el: "#app"
});

Vue.use(LazyComponent);
</script>

 

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

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

---

Development

Vue3

yarn build:vue3 # build for vue3

# Serve

cd dev/vue3

yarn install
yarn serve

Vue2

yarn build:vue2 # build for vue2

# Serve

cd dev/vue2

yarn install
yarn serve

Vue 2&3

yarn build # build for vue2 and vue3

Sponsorship

You can sponsor me for the continuity of my projects:

License

MIT License

Copyright (c) selimdoyranli selimdoyranli@gmail.com