The project has moved to https://github.com/ax2inc/nuxt-modules/tree/master/packages/lozad
Lozad.js integration for Nuxt
Integrate Lozad.js with your Nuxt project.
- Install the module with your favorite package manager.
yarn add @ax2/lozad-module
# Or npm i @ax2/lozad-module
- Add
lozad-module
tomodules
section ofnuxt.config.js
.
// nuxt.config.js
{
modules: [
'@ax2/lozad-module',
],
}
- Configure the module as needed by adding a
lozad
key tonuxt.config.js
.
// nuxt.config.js
{
lozad: {
// Module options
}
}
- Type:
String
- Default:
'.lozad'
Selector which lozad uses to find elements to be lazy-loaded.
- Type:
Object
- Default:
{}
IntersectionObserver options, see lozad options.
- Type:
Boolean
- Default:
false
Set to true
to enable IntersectionObserver polyfill.
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>
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Copyright (c) Ax2 Inc.