@ax2/lozad-module
v0.2.0
Published
Lozad integration for Nuxt
Downloads
439
Readme
lozad-module
Lozad.js integration for Nuxt
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
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
}
}
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
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Ax2 Inc.