Nuxt LazySizes

LazySizes module for Nuxt.js

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. Add nuxt-lazysizes dependency to your project

$ npm install --save-dev nuxt-lazysizes # or yarn add --dev nuxt-lazysizes

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

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

{
  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

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

By default, all plugins are set to false.

Plugins example

// nuxt.config.js

{
  lazySizes: {
    plugins: {
      blurUp: true,
      nativeLoading: true,
      unveilhooks: true,
    }
  }
}

More info

Options

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

Default options

// nuxt.config.js

{
  lazySizes: {
    extendAssetUrls: undefined,
    plugins: {
      blurUp: false,
      nativeLoading: false,
      unveilhooks: 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

{
  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

{
  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

{
  lazySizes: {
    plugins: {
      unveilhooks: true
    },
  }
}

More info

License

LazySizes

MIT License

Copyright (c) Alexander Farkas

Nuxt LazySizes Module

MIT License

Copyright (c) Ivo Dolenc