highcanfly-club/lazy-vue

Lazy utilities for Vue3

Lazy utilities for Vue3

This utility is developped for internal use.
Feel free to use it but there is strictly no support.
It uses TailwindCss classes.

LazyObserver

it loads a component while the user scrolls on it

<template>
    <lazy-observer :id="index" @on-change="onlazyMeteo">
        <some-custom-vue-sfc />
    </lazy-observer>
</template>
<script setup lang="ts">
import {LazyObserver} from "@sctg/lazy-vue";
</script>

LazyImg

it loads a component while the user scrolls on it

<template>
    <lazy-img class="mx-auto w-8 h-8" src="https://someurl/img.jpg"
                alt="Alt text" />
</template>
<script setup lang="ts">
import {LazyImg} from "@sctg/lazy-vue";
</script>

CssLightbox

this is a no script pure css lightbox it needs to create zIndex: 999 in tailwindConfig

<template>
    <css-lightbox class="absolute block left-0 top-O w-full h-full"
            src="https://someurl/img.jpg"
            full-screen-src="https://someurl/img-full-res.jpg"
            :lazy="true"
            />
</template>
<script setup lang="ts">
import {CssLightbox} from "@sctg/lazy-vue";
import '@sctg/lazy-vue/dist/index.css'
</script>