nuxt-lazysizes

    1.4.0 • Public • Published

    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
    1. 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 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,
          parentFit: true,
          rias: true,
          optimumx: true,
          customMedia: true,
          bgset: 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,
          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
    
    {
      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

    Parent-fit plugin

    • Default: false
    // nuxt.config.js
    
    {
      lazySizes: {
        plugins: {
          parentFit: true
        },
      }
    }

    More info

    Rias plugin (Responsive image as a service / Responsive image on demand)

    • Default: false
    // nuxt.config.js
    
    {
      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
    
    {
      lazySizes: {
        plugins: {
          optimumx: true
        },
      }
    }

    More info

    CustomMedia plugin

    • Default: false
    // nuxt.config.js
    
    {
      lazySizes: {
        plugins: {
          customMedia: true
        },
    
        customMedia: {}
      }
    }

    More info

    Bgset plugin

    • Default: false
    // nuxt.config.js
    
    {
      lazySizes: {
        plugins: {
          bgset: true
        },
      }
    }

    More info

    License

    LazySizes

    MIT License

    Copyright (c) Alexander Farkas

    Nuxt LazySizes Module

    MIT License

    Copyright (c) Ivo Dolenc

    Install

    npm i nuxt-lazysizes

    DownloadsWeekly Downloads

    1,970

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • ivodolenc