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
}
}]
]