Nuxt Lazyimages

Simple LazySizes module for Nuxt 3

Features

• ✨ Helps you load lazysizes in your Nuxt 3 project
• 🔥 Easily pass the Defer offscreen images audit audit con Lighthouse
• 🧰 Fully customize the library from your nuxt config file
• 👌 No manual configuration needed to start

Installation

Add nuxt-lazyimages to your project:

1npm install --save-dev nuxt-lazyimages
2
3# Using yarn
4yarn add --dev nuxt-lazyimages

Add it to the modules array in your nuxt.config.ts:

1import { defineNuxtConfig } from 'nuxt'
2
3export default defineNuxtConfig({
4    modules: ['nuxt-lazyimages']
5})

Add the default class lazyload to your image in conjunction with a data-src and/or data-srcset attribute.

1<!-- non-responsive: -->
2<img data-src="image.jpg" class="lazyload" />

1<!-- responsive example with automatic sizes calculation: -->
2<img
3    data-sizes="auto"
4    data-src="image2.jpg"
5    data-srcset="image1.jpg 300w,
6    image2.jpg 600w,
7    image3.jpg 900w" class="lazyload" />

✨ That's it!

Configuration

If you wish to change the configuration of Lazysizes, open your nuxt.config.ts or nuxt.config.js file, and set the configuration using the lazyimages object:

1import { defineNuxtConfig } from 'nuxt';
2
3export default defineNuxtConfig({
4    modules: [
5        'nuxt-lazyimages'
6    ],
7    lazyimages: {
8        // Default configuration:
9        lazyClass: 'lazyload',
10        preloadAfterLoad: false,
11        loadedClass: 'lazyloaded',
12        loadingClass: 'lazyloading',
13        preloadClass: 'lazypreload',
14        errorClass: 'lazyerror',
15        autosizesClass: 'lazyautosizes',
16        fastLoadedClass: 'ls-is-cached',
17        iframeLoadMode: 0,
18        srcAttr: 'data-src',
19        srcsetAttr: 'data-srcset',
20        sizesAttr: 'data-sizes',
21        minSize: 40,
22        customMedia: {},
23        expFactor: 1.5,
24        hFac: 0.8,
25        loadMode: 2,
26        loadHidden: true,
27        ricTimeout: 0,
28        throttleDelay: 125
29    }
30});

Please refer to LazySizes' JS documentation to know more about each option.

Plugins

Currently supported Lazysizes plugins:

• bgset

Open your nuxt.config.ts or nuxt.config.js file and activate whichever plugin you prefer:

1export default defineNuxtConfig({
2    lazyimages: {
3        plugins: {
4            bgset: true
5        }
6    }
7})

Development

• Clone this repository
• Install dependencies using npm install
• Stub module with npm run dev:prepare
• Run npm run dev to start playground in development mode

Credits

This simple library is a simple wrapper around Alexander Farkas' LazySizes super-fast lazyloader. All credit goes to him.

License

Published under the MIT License.