Nuxt Lazysizes

Lazysizes module for Nuxt 2.

Features

• 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 and reliable solution
• Supports options to enable additional plugins
• Zero-config setup ready to go 🚀

Quick Start

1. Install nuxt-lazysizes dependency to your project

1$ yarn add -D nuxt-lazysizes # or npm i -D nuxt-lazysizes

2. Enable nuxt-lazysizes in the buildModules section

1// nuxt.config.js
2
3export default {
4  buildModules: ['nuxt-lazysizes'],
5
6  lazySizes: {
7    /* Module Options */
8  }
9}

That's it! Start developing your app!

Examples

Here are some code examples

• Basic
• Advanced
• Plugins

Basic usage

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.

1// nuxt.config.js
2
3export default {
4  buildModules: ['nuxt-lazysizes']
5}

1<img data-src="/media/image.jpg" class="lazyload" />

More info

Advanced usage (optional)

By default, loading images from the assets folder won't work without extra settings because lazysizes uses custom attributes for lazyloading.

1<!-- This won't work -->
2
3<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:

1// nuxt.config.js
2
3export default {
4  buildModules: ['nuxt-lazysizes'],
5
6  lazySizes: {
7    extendAssetUrls: {
8      img: ['src', 'srcset', 'data-src', 'data-srcset'],
9      source: ['src', 'srcset', 'data-src', 'data-srcset'],
10
11      // Example for a custom component
12      AppImage: ['source-md-url', 'image-url']
13    }
14  }
15}

After defining the extendAssetUrls option, loading images from the assets folder will work as expected 👌

Non-responsive example

1<img data-src="~/assets/media/image.jpg" class="lazyload" />

Responsive example

1<figure>
2  <picture>
3    <source
4      data-srcset="~/assets/media/image-md.jpg"
5      media="(min-width:700px)"
6    />
7
8    <img data-src="~/assets/media/image.jpg" class="lazyload" />
9  </picture>
10</figure>

Custom component example

1<AppImage
2  source-md-url="~/assets/media/image-md.jpg"
3  image-url="~/assets/media/image.jpg"
4/>

Extra plugins (optional)

The module also supports options to enable additional plugins, so you can easily extend and adjust lazysizes to your needs.

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      blurUp: true,
7      nativeLoading: true,
8      bgset: true
9    }
10  }
11}

More info

Module Options

Lazysizes automatically detects new elements with the class lazyload so you won't need to call or configure anything in most situations.

Defaults

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    extendAssetUrls: undefined,
6    plugins: {
7      blurUp: false,
8      nativeLoading: false,
9      unveilhooks: false,
10      parentFit: false,
11      rias: false,
12      optimumx: false,
13      customMedia: false,
14      bgset: false
15    },
16
17    // LazySizes JS API
18    lazyClass: 'lazyload',
19    loadedClass: 'lazyloaded',
20    loadingClass: 'lazyloading',
21    preloadClass: 'lazypreload',
22    errorClass: 'lazyerror',
23    autosizesClass: 'lazyautosizes',
24    fastLoadedClass: 'ls-is-cached',
25    iframeLoadMode: 0,
26    srcAttr: 'data-src',
27    srcsetAttr: 'data-srcset',
28    sizesAttr: 'data-sizes',
29    minSize: 40,
30    customMedia: {},
31    init: true,
32    expFactor: 1.5,
33    hFac: 0.8,
34    loadMode: 2,
35    loadHidden: true,
36    ricTimeout: 0,
37    throttleDelay: 125
38  }
39}

More info

Blur-Up plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      blurUp: true
7    },
8
9    // Default 'blurUp' settings
10    blurUpClass: 'ls-blur-up-img',
11    blurUpLoadingClass: 'ls-blur-up-is-loading',
12    blurUpInviewClass: 'ls-inview',
13    blurUpLoadedClass: 'ls-blur-up-loaded',
14    blurUpLoadedOriginalClass: 'ls-original-loaded'
15  }
16}

More info

Native loading plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      nativeLoading: true
7    },
8
9    // Default 'nativeLoading' settings
10    nativeLoading: {
11      setLoadingAttribute: false,
12      listenerMap: {
13        focus: 1,
14        mouseover: 1,
15        click: 1,
16        load: 1,
17        transitionend: 1,
18        animationend: 1,
19        scroll: 1,
20        resize: 1
21      },
22      disableListeners: undefined
23    }
24  }
25}

More info

Unveilhooks plugin (data-bg)

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      unveilhooks: true
7    }
8  }
9}

More info

Parent-fit plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      parentFit: true
7    }
8  }
9}

More info

Rias plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      rias: true
7    },
8
9    // Rias defaults
10    rias: {
11      prefix: '',
12      postfix: '',
13      srcAttr: 'data-src',
14      absUrl: false,
15      modifyOptions: noop,
16      widthmap: {},
17      ratio: false,
18      traditionalRatio: false,
19      aspectratio: false,
20      widths: []
21    }
22  }
23}

More info

Optimumx plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      optimumx: true
7    }
8  }
9}

More info

CustomMedia plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      customMedia: true
7    },
8
9    customMedia: {}
10  }
11}

More info

Bgset plugin

• Default: false

1// nuxt.config.js
2
3export default {
4  lazySizes: {
5    plugins: {
6      bgset: true
7    }
8  }
9}

More info

License

LazySizes

MIT License

Copyright (c) Alexander Farkas

Nuxt LazySizes

MIT License

Copyright (c) Ivo Dolenc