Vue-v-lazy-component-PROSAGA-码农传奇

v-lazy-component

Vue component render when visible 👁️⚡️

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></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></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