[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![changelog][changelog-src]][changelog-href]
[![License][license-src]][license-href]

v-lazy-component

Vue component render when visible 👁️⚡️

Website

Features

- ⚡️ Lightweight
- 🎨 Interactive
- 👶🏻 Easy implementation
- 📦 Vue2 & Vue3 support

Getting Started

$3

DEMO

Installation

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

$3

#### Global Register

`js
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
`html

`
#### Via CDN
`js




`

$3

#### Global Register

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

Vue.use(LazyComponent);
`

#### Local Register
`js
import LazyComponent from "v-lazy-component/vue2";

export default {
components: {
LazyComponent
}
}
`
#### Via CDN
`js




`
 

$3

`html






`

idle variant
`html
....
Click for Render







`

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

`css
.v-lazy-component.v-lazy-component--loading {
filter: blur(20px);
}

.v-lazy-component.v-lazy-component--loaded {
filter: blur(0);
transition: filter 1s;
}
`

---

Development

$3

`bash
yarn build:vue3 # build for vue3
`

`bash

Serve

cd dev/vue3

yarn install
yarn serve
`

$3

`bash
yarn build:vue2 # build for vue2
`

`bash

Serve

cd dev/vue2

yarn install
yarn serve
`

$3

`bash
yarn build # build for vue2 and vue3
``

Sponsorship

You can sponsor me for the continuity of my projects:

License

MIT License

Copyright (c) selimdoyranli


[npm-version-src]: https://img.shields.io/npm/v/v-lazy-component/latest.svg
[npm-version-href]: https://npmjs.com/package/v-lazy-component

[npm-downloads-src]: https://img.shields.io/npm/dt/v-lazy-component.svg
[npm-downloads-href]: https://npmjs.com/package/v-lazy-component

[codecov-src]: https://img.shields.io/codecov/c/github/selimdoyranli/v-lazy-component.svg
[codecov-href]: https://codecov.io/gh/selimdoyranli/v-lazy-component

[changelog-src]: https://img.shields.io/static/v1?label=%F0%9F%93%96&message=Release%20Notes%20|%20CHANGELOG&color=blue
[changelog-href]: ./CHANGELOG.md

[license-src]: https://img.shields.io/badge/License-MIT-blue.svg
[license-href]: https://npmjs.com/package/v-lazy-component/LICENSE