ivodolenc/nuxt-lazysizes

Lazysizes module for Nuxt 2.

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

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

nuxt-lazysizes's Issues

Loading assets from static folder broken on nuxt2 bridge

I'm updating a project to nuxt2 bridge and this broke images loaded from the static via lazysizes (getting 404s). My current workaround is to load from the assets folder as explained in https://github.com/ivodolenc/nuxt-lazysizes#advanced-usage-optional.

Integrate with Nuxt/Image

How I can I use with Nuxt/image. I got large size of images from my api. I want to compress images to low file size. I currently use Nuxt/image to compress my images.

SSR

Morning, does this work with ssr on the server or with static sites.

Can it work with dynamic attributes?

Steps to Reproduce

Hi. I have images with dynamic sources like this:

<template>
  <img
    class="lazyload"
    :src="`~/assets/${month}--low.jpg`"
    :data-src="`~/assets/${month}.jpg`"
  >
</template>

<script>
export default {
  data () {
    return {
      month: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][new Date().getMonth()]
    }
  }
}
</script>

Can nuxt-lazysizes be made to work with dynamic attributes like this?

Current Behavior

Attribute is not processed

Expected Behavior

Process dynamic attributes

Additional Details

No response

Version

1.4.3

RIAS Plugin support

Thank you for creating lazysizes wrapper for Nuxt.js!
Could I ask you to add Rias Plugin support, please?

Are lazysizes plugins also supported with this module?

I would like to use data-bg option for lazy loading background images. Is this currently possible with nuxt-lazysizes?

Version 1.2.1 breaks SSR

Throws error "window is not defined". I've made a repo to easily reproduce the error: https://github.com/MateiNenciu/nuxt-lazy-sizes-ssr-issue

I believe this issue appeared when you removed the ssr: false option from plugin.

NUXT 3 Support?

Hello there!
Could anybody shed some light about NUXT 3 support? Is this already in the works? Any ETA if so?
Any information would be appreciate as we'd really love to stick to lazy sizes in after our NUXT 3 migration. Thanks :)

Height and Width?

Hi Ivo! I use your lazy sizes module and works perfectly for me. Ivo there is way to add width and height to my images? Right now I use Picture tag and in Lighthouse it show no width height but I set.

<picture>

  <source
    type="image/webp"
    media="(max-width: 640px)"
    data-srcset="/images/[email protected]">

  <source
    type="image/webp"
    media="(max-width: 1024px)"
    data-srcset="/images/[email protected]">

  <img data-src="/images/[email protected]"
    width="640"
    height="640"
    alt="Blue 1"
    class="lazyload">

</picture>

Is doing right?

Image error when apply lazysize

<img :data-src="product.url" alt="product" class="w-full h-full object-contain lazyload" />

I just add a simple lazyload into the code and this happen a second before images show up.
Anyone can tell me what's wrong with it ?

Non-lazyloaded images are 404 (Not Found) after setting up extendAssetUrls in nuxt.config.js

I added these lines in my nuxt.config.js file as mentioned in the doc, to make the ~assets calls work :

lazySizes: {
    extendAssetUrls: {
      img: 'data-src',
      source: 'data-srcset',

      // Component with custom props
      AppImage: ['source-md-url', 'image-url'],
    },
  },

but now all my non-lazyloaded images (with regular src tags) are getting 404 Not Found.

Lazyloaded images are working correctly. But would it be possible tu support both lazyloaded and non-lazyloaded?

Thanks!

Additional Plugins like parent-fit

Hey, I see you support plugins, but it seems like only these three: blurUp, nativeLoading, unveilhooks.
How do I enable the parent-fit plugin? Or any other?

Dependency was not found after installed.

` ERROR Failed to compile with 1 errors friendly-errors 22:57:24

This dependency was not found: friendly-errors 22:57:24
friendly-errors 22:57:24

• lazysizes in ./.nuxt/lazySizes.js`

buildModules
buildModules: [ '@nuxtjs/eslint-module', '@nuxtjs/tailwindcss', 'nuxt-lazysizes', ],