v-lazy-component
Vue component render when visible 👁️⚡️
- ⚡️ Lightweight
- 🎨 Interactive
- 👶🏻 Easy implementation
- 📦 Vue2 & Vue3 support
yarn add v-lazy-component # or npm i v-lazy-componentimport { createApp } from 'vue' import App from './App.vue' import LazyComponent from 'v-lazy-component' const app = createApp(App) app.use(LazyComponent) app.mount('#app')<script setup> import LazyComponent from 'v-lazy-component' </script><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>import Vue from "vue"; import LazyComponent from "v-lazy-component/vue2"; Vue.use(LazyComponent);import LazyComponent from "v-lazy-component/vue2"; export default { components: { LazyComponent } }<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>
<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>| 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 |
placeholder | Content that is loaded as a placeholder until it comes into view |
|---|
intersected | dispatch event when visible |
|---|
.v-lazy-component.v-lazy-component--loading { filter: blur(20px); } .v-lazy-component.v-lazy-component--loaded { filter: blur(0); transition: filter 1s; }yarn build:vue3 # build for vue3# Serve cd dev/vue3 yarn install yarn serveyarn build:vue2 # build for vue2# Serve cd dev/vue2 yarn install yarn serveyarn build # build for vue2 and vue3You can sponsor me for the continuity of my projects:
Copyright (c) selimdoyranli selimdoyranli@gmail.com