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:

npm install --save-dev nuxt-lazyimages

# Using yarn
yarn add --dev nuxt-lazyimages

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

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    modules: ['nuxt-lazyimages']
})

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

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

<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    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:

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
    modules: [
        'nuxt-lazyimages'
    ],
    lazyimages: {
        // Default configuration:
        lazyClass: 'lazyload',
        preloadAfterLoad: false,
        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: {},
        expFactor: 1.5,
        hFac: 0.8,
        loadMode: 2,
        loadHidden: true,
        ricTimeout: 0,
        throttleDelay: 125
    }
});

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

Plugins

Currently supported Lazysizes plugins:

• [x] bgset

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

export default defineNuxtConfig({
    lazyimages: {
        plugins: {
            bgset: true
        }
    }
})

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.