@unlazy/nuxt

@unlazy/nuxt

Nuxt module 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/nuxt

# npm
npm i @unlazy/nuxt

Quick Start

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@unlazy/nuxt'],
})

The UnLazyImage component is auto-imported globally:

<template>
  <UnLazyImage
    blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
    src-set="image-320w.jpg 320w, image-640w.jpg 640w"
    auto-sizes
  />
</template>

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