Lazysizes module for Nuxt 2.
- Helps you integrate
lazysizesloader - Allows you to easily set options through the module
- Includes settings that can be used to extend the Nuxt build
loader - Boosts your lighthouse score and overall performance 🔥
- Provides a
lightweight,fastandreliablesolution - Supports options to enable additional
plugins Zero-configsetup ready to go 🚀
- Install
nuxt-lazysizesdependency to your project
$ yarn add -D nuxt-lazysizes # or npm i -D nuxt-lazysizes- Enable
nuxt-lazysizesin thebuildModulessection
// nuxt.config.js
export default {
buildModules: ['nuxt-lazysizes'],
lazySizes: {
/* Module Options */
}
}That's it! Start developing your app!
Here are some code examples
Lazysizes does not need any configuration. Add the class lazyload to your images/iframes in combination with a data-src and/or data-srcset attribute.
// nuxt.config.js
export default {
buildModules: ['nuxt-lazysizes']
}<img data-src="/media/image.jpg" class="lazyload" />By default, loading images from the assets folder won't work without extra settings because lazysizes uses custom attributes for lazyloading.
<!-- This won't work -->
<img :data-src="require('~/assets/media/image.jpg')" class="lazyload" />✅ To fix this problem, the module provides extendAssetUrls option that can be used to extend the Nuxt build loader and define custom tags with new attributes:
// nuxt.config.js
export default {
buildModules: ['nuxt-lazysizes'],
lazySizes: {
extendAssetUrls: {
img: ['src', 'srcset', 'data-src', 'data-srcset'],
source: ['src', 'srcset', 'data-src', 'data-srcset'],
// Example for a custom component
AppImage: ['source-md-url', 'image-url']
}
}
}After defining the extendAssetUrls option, loading images from the assets folder will work as expected 👌
Non-responsive example
<img data-src="~/assets/media/image.jpg" class="lazyload" />Responsive example
<figure>
<picture>
<source
data-srcset="~/assets/media/image-md.jpg"
media="(min-width:700px)"
/>
<img data-src="~/assets/media/image.jpg" class="lazyload" />
</picture>
</figure>Custom component example
<AppImage
source-md-url="~/assets/media/image-md.jpg"
image-url="~/assets/media/image.jpg"
/>The module also supports options to enable additional plugins, so you can easily extend and adjust lazysizes to your needs.
// nuxt.config.js
export default {
lazySizes: {
plugins: {
blurUp: true,
nativeLoading: true,
bgset: true
}
}
}Lazysizes automatically detects new elements with the class lazyload so you won't need to call or configure anything in most situations.
Defaults
// nuxt.config.js
export default {
lazySizes: {
extendAssetUrls: undefined,
plugins: {
blurUp: false,
nativeLoading: false,
unveilhooks: false,
parentFit: false,
rias: false,
optimumx: false,
customMedia: false,
bgset: false
},
// LazySizes JS API
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
autosizesClass: 'lazyautosizes',
fastLoadedClass: 'ls-is-cached',
iframeLoadMode: 0,
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
blurUp: true
},
// Default 'blurUp' settings
blurUpClass: 'ls-blur-up-img',
blurUpLoadingClass: 'ls-blur-up-is-loading',
blurUpInviewClass: 'ls-inview',
blurUpLoadedClass: 'ls-blur-up-loaded',
blurUpLoadedOriginalClass: 'ls-original-loaded'
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
nativeLoading: true
},
// Default 'nativeLoading' settings
nativeLoading: {
setLoadingAttribute: false,
listenerMap: {
focus: 1,
mouseover: 1,
click: 1,
load: 1,
transitionend: 1,
animationend: 1,
scroll: 1,
resize: 1
},
disableListeners: undefined
}
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
unveilhooks: true
8000
}
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
parentFit: true
}
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
rias: true
},
// Rias defaults
rias: {
prefix: '',
postfix: '',
srcAttr: 'data-src',
absUrl: false,
modifyOptions: noop,
widthmap: {},
ratio: false,
traditionalRatio: false,
aspectratio: false,
widths: []
}
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
optimumx: true
}
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
customMedia: true
},
customMedia: {}
}
}- Default:
false
// nuxt.config.js
export default {
lazySizes: {
plugins: {
bgset: true
}
}
}LazySizes
Copyright (c) Alexander Farkas
Nuxt LazySizes
Copyright (c) Ivo Dolenc