Skip to content

selimdoyranli/v-lazy-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version npm downloads changelog License

v-lazy-component

Vue component render when visible 👁️⚡️

GitHub stars

Website

Sponsorship 💖
GitHub
Buy me a coffee

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