@unlazy/vue

Vue component for unlazy, the universal lazy loading library leveraging native browser APIs.

• 🎀 Native: Utilizes the loading="lazy" attribute
• 🌊 BlurHash & ThumbHash support: SSR & client-side decoding
• ⚡ Core Web Vitals-aware: Eager-priority path for above-the-fold images, dev-mode LCP warning
• 🎟 <picture>: Art direction with automatic sizes

Installation

# pnpm
pnpm add @unlazy/vue

# npm
npm i @unlazy/vue

Quick Start

<script setup lang="ts">
import { UnLazyImage } from '@unlazy/vue/components'
</script>

<template>
  <UnLazyImage
    blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
    src-set="image-320w.jpg 320w, image-640w.jpg 640w"
    auto-sizes
    @image-load="img => console.log('Loaded:', img.src)"
  />
</template>

You can also register the component globally; see the Vue integration guide.

Documentation

📖 Read the full documentation, including hash-based placeholders, Core Web Vitals, and SSR.

Migrating from v1

See the migration guide for breaking changes in v2, including the @loaded → @image-load rename and the new @image-error event.

License

MIT License © 2023-PRESENT Johann Schopplich