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 [email protected]