nuxt-lazy-load

npm i nuxt-lazy-load

👉 Description

You don't need to bother with extra attributes on elements (like data-src and data-srcset), just add the module in nuxt.config.js and that's it

⚠️ For Nuxt 2, use nuxt-lazy-load < 3.0.0

🚀 Usage

// nuxt.config.js (nuxt.config.ts)
modules: [
  'nuxt-lazy-load'
]

🔧 Options

modules: [
  'nuxt-lazy-load'
],

lazyLoad: {
  // These are the default values
  images: true,
  videos: true,
  audios: true,
  iframes: true,
  native: false,
  directiveOnly: false,
  
  // Default image must be in the public folder
  defaultImage: '/images/default-image.jpg',

  // To remove class set value to false
  loadingClass: 'isLoading',
  loadedClass: 'isLoaded',
  appendClass: 'lazyLoad',
  
  observerConfig: {
    // See IntersectionObserver documentation
  }
}

directiveOnly

If you don't want to use lazy load on every image/video/audio/iframe, set directiveOnly to true and use directive like this (with data-src/data-srcset/data-poster)

<img data-src="image.png" alt="" title="" v-lazy-load>

You don't need to add directive (v-lazy-load) on source elements

<video data-poster="~/assets/images/poster.jpg" v-lazy-load>
  <source data-src="video.mp4" type="video/mp4"> --> without directive
</video>

data-not-lazy

If you don't want to lazy load single element, just add data-not-lazy attribute

<audio controls="controls" data-not-lazy>
  <source type="audio/mpeg" src="audio.mp3">
</audio>

Buy me a coffee