nuxt-lazysizes

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

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

1. Enable nuxt-lazysizes in the buildModules section

// nuxt.config.js

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

  lazySizes: {
    /* Module Options */
  }
}

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.

// nuxt.config.js

export default {
  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 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"
/>

Extra plugins (optional)

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

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

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

More info

Blur-Up plugin

• 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'
  }
}

More info

Native loading plugin

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

More info

Unveilhooks plugin (data-bg)

• Default: false

// nuxt.config.js

export default {
  lazySizes: {
    plugins: {
      unveilhooks: true
    }
  }
}

More info

Parent-fit plugin

• Default: false

// nuxt.config.js

export default {
  lazySizes: {
    plugins: {
      parentFit: true
    }
  }
}

More info

Rias plugin

• 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: []
    }
  }
}

More info

Optimumx plugin

• Default: false

// nuxt.config.js

export default {
  lazySizes: {
    plugins: {
      optimumx: true
    }
  }
}

More info

CustomMedia plugin

• Default: false

// nuxt.config.js

export default {
  lazySizes: {
    plugins: {
      customMedia: true
    },

    customMedia: {}
  }
}

More info

Bgset plugin

• Default: false

// nuxt.config.js

export default {
  lazySizes: {
    plugins: {
      bgset: true
    }
  }
}

More info

License

LazySizes

MIT License

Copyright (c) Alexander Farkas

Nuxt LazySizes

MIT License

Copyright (c) Ivo Dolenc