Lazysizes module for Nuxt.js

Nuxt LazySizes

LazySizes module for Nuxt.js

Features

Helps you integrate lazysizes image loader
Allows you to easily set options through the module
Includes settings for extending the nuxt build loader
Boosts your lighthouse score and overall performance
Provides a lightweight, fast and reliable solution
Includes zero-config setup ready to go
and much more 🔥

Setup

Add nuxt-lazysizes dependency to your project

$ npm install --save-dev nuxt-lazysizes

Add nuxt-lazysizes to the buildModules section of nuxt.config.js

// nuxt.config.js

export default {
  buildModules: ['nuxt-lazysizes'],

  lazySizes: {
    /* module options */
  }
}

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.

Basic usage

// nuxt.config.js

{
  buildModules: ['nuxt-lazysizes'],
}

<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.

<!-- This won't work -->

<img :data-src="require('~/assets/media/image.jpg')" class="lazyload" />

To fix that problem, the module provides extendAssetUrls option which can be used to extend the nuxt build loader and define custom tags with new attributes:

// nuxt.config.js

{
  buildModules: ['nuxt-lazysizes'],

  lazySizes: {
    extendAssetUrls: {
      img: 'data-src',
      source: 'data-srcset',
      // Component with custom props
      AppImage: ['url', 'image-url'],
    },
  }
}

Now loading images from the assets folder will work properly:

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

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

<AppImage
  url="~/assets/media/image-md.jpg"
  image-url="~/assets/media/image.jpg"
/>

Options

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

All default options

// nuxt.config.js

{
  lazySizes: {
    extendAssetUrls: undefined,

    // LazySizes default options
    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
  }
}