@ax2/lozad-module

lozad-module

Lozad.js integration for Nuxt

📖 Release Notes

Features

Integrate Lozad.js with your Nuxt project.

Setup

• Install the module with your favorite package manager.

yarn add @ax2/lozad-module
# Or npm i @ax2/lozad-module

• Add lozad-module to modules section of nuxt.config.js.

// nuxt.config.js

{
  modules: [
    '@ax2/lozad-module',
 ],
}

• Configure the module as needed by adding a lozad key to nuxt.config.js.

// nuxt.config.js

{
  lozad: {
    // Module options
  }
}

Options

selector

• Type: String
• Default: '.lozad'

Selector which lozad uses to find elements to be lazy-loaded.

observer

• Type: Object
• Default: {}

IntersectionObserver options, see lozad options.

polyfill

• Type: Boolean
• Default: false

Set to true to enable IntersectionObserver polyfill.

Usage

To enable lazy-loading, you must trigger lozad's observe() method in the mounted() hook of your pages/components that include lazy-loadable content.

<template>
<div>
  <img class="lozad" data-src="https://placekitten.com/200/300" />
</div>
</template>

<script>
export default {
  mounted () {
    this.$lozad.observe();
  },
};
</script>

Development

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using npm run dev

License

MIT License

Copyright (c) Ax2 Inc.