nuxt3-lazy-load

nuxt3-lazy-load

npm i nuxt3-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 😊

🚀 Usage

// nuxt.config.js (nuxt.config.ts)
modules: [
  'nuxt3-lazy-load'
]
// or
modules: [
  ['nuxt3-lazy-load', {
    // Your options
  }]
]

Buy me a coffee

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>

🔧 Options

modules: [
  ['nuxt3-lazy-load', {
    // 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
    }
  }]
]