Lazysizes module for Nuxt 2.
- Helps you integrate
lazysizes
loader - 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
,fast
andreliable
solution - Supports options to enable additional
plugins
Zero-config
setup ready to go ๐
- Install
nuxt-lazysizes
dependency to your project
$ yarn add -D nuxt-lazysizes # or npm i -D nuxt-lazysizes
- Enable
nuxt-lazysizes
in thebuildModules
section
// 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
}
}
}
- 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