Setup

Check out the Nuxt 3 documentation for more information about installing and using modules.

Installation

Add @nuxt-modules/lazy-load dependency to your project:

yarn add @nuxt-modules/lazy-load

npm install @nuxt-modules/lazy-load

Then, add @nuxt-modules/lazy-load to the buildModules section of your Nuxt configuration:

export default {
  buildModules: [
    ['@nuxt-modules/lazy-load', {
      // Options
    }]
  ],
  // Or
  lazyLoad: {
    // Options
  }
}

Options

Defaults:

{
  selector: 'lazy';
  options: {
    rootMargin: '10px 0px';
    threshold: 0.1;
    enableAutoReload: true;
    load: () => {}
  };
}

selector

Class atribute selector that will be used to find elements that should be lazy loaded. By default has a value of lazy. *Oposite to Lozad.js, @nuxt-modules/lazy-load accepts a class name without a dot, i.e. lazy instead of .lazy. Dot is added in the useLazyLoad composable instead and passed to lozad.

You can read more about it here

options

IntersectionObserver options that are passed to Lozad.js

You can read more about it here