# v-lazy-component

> Vue component render when visible 👁️⚡️

Latest version **3.0.9** (published 2023-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-lazy-component
pnpm add v-lazy-component
yarn add v-lazy-component
bun add v-lazy-component
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.9 |
| Published | 2023-07-17 |
| First published | 2020-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 231.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 61 |
| Author | selimdoyranli |
| Maintainers | selimdoyranli |
| Keywords | vue lazy component, vue lazy, vue2 lazy, vue3 lazy |

## Links

- npm: https://www.npmjs.com/package/v-lazy-component
- Repository: https://github.com/selimdoyranli/v-lazy-component
- Homepage: https://v-lazy-component.vercel.app
- npm.io page: https://npm.io/package/v-lazy-component

## Recent versions

- 3.0.9 (latest) — 2023-07-17
- 3.0.8 — 2023-05-09
- 3.0.7 — 2023-05-09
- 3.0.6 — 2023-05-09
- 3.0.5 — 2023-05-08
- 3.0.4 — 2023-05-08
- 3.0.3 — 2023-05-08
- 3.0.2 — 2023-05-07
- 3.0.1 — 2023-05-07
- 3.0.0 — 2023-05-07
- 2.1.1 — 2023-03-15
- 2.1.0 — 2022-02-13
- 2.0.0 — 2021-04-30
- 1.0.5 — 2020-05-07
- 1.0.4 — 2020-05-07
- … 3 more at https://npm.io/package/v-lazy-component/versions

## README

[![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]

<p align="center">
<b>v-lazy-component</b>
</p>

<p align="center">
Vue component render when visible 👁️⚡️
</p>

<p align="center">
  <a href="https://v-lazy-component.vercel.app" target="_blank"> 
    <img src='/meta/logo.png' width="256"/>
  </a>
</p>

<p align="center">
<a href="https://github.com/selimdoyranli/v-lazy-component" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/selimdoyranli/v-lazy-component?style=social"></a>
</p>

<p align="center">
  <a href="https://v-lazy-component.vercel.app" target="_blank">Website</a>
</p>

<div align="center">
<sub><b>Sponsorship 💖</b></sub><br>
<sub><a href="https://github.com/sponsors/selimdoyranli">GitHub</a></sub><br>
<sub><a href="https://buymeacoffee.com/selimdoyranli">Buy me a coffee</a></sub><br>
</div>

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

## Getting Started

### Try it Online ⚡️

[DEMO](https://v-lazy-component.vercel.app/demo)


## Installation

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

### Vue3

#### 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
<script setup>
import LazyComponent from 'v-lazy-component'
</script>
```
#### Via CDN
```js
<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

```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
<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>
```
&nbsp;

### Usage

```html
<lazy-component wrapper-tag="section" @intersected="optionalDispatch">
  <your-component/>
  
  <!-- Optional -->
  <template #placeholder>
    <span>Loading...</span>
  </template>
</lazy-component>
```

idle variant
```html
....
<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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)|String | 0px 0px 0px 0px
|`threshold` |[Intersection Observer API doc](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)|Number, Array| 0
[See Intersection Observer API doc](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)

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

### Vue3

```bash
yarn build:vue3 # build for vue3
```

```bash
# Serve

cd dev/vue3

yarn install
yarn serve
```

### Vue2

```bash
yarn build:vue2 # build for vue2
```

```bash
# Serve

cd dev/vue2

yarn install
yarn serve
```

### Vue 2&3

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

## Sponsorship

You can sponsor me for the continuity of my projects:

<p align="left">
  <a href="https://github.com/sponsors/selimdoyranli">
    <img src='https://img.shields.io/github/sponsors/selimdoyranli?style=for-the-badge&label=%E2%99%A5+Be+Sponsor&logo=GitHub'/>
  </a>
</p>

<p align="left">
  <a href="https://buymeacoffee.com/selimdoyranli">
    <img src='https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png'/>
  </a>
</p>

## License

[MIT License](./LICENSE)

Copyright (c) selimdoyranli <selimdoyranli@gmail.com>

<!-- Badges -->
[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

---
_Source: https://npm.io/package/v-lazy-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._