@nuxt-modules/lazy-load
Lazy Loading Images module for Nuxt 3
Features
- Nuxt 3 ready
- Easy Lazy Loading Images, Pictures, and other HTML elements
- Advanced configuration using Lozad.js
- Handy composable useLazyLoad
- TypeScript support
📖 Read the documentation
Setup
yarn add @nuxt-modules/lazy-load
npm i @nuxt-modules/lazy-load
Basic usage
Firstly, you need to add @nuxt-modules/lazy-load
to your Nuxt config.
{
buildModules: [
['@nuxt-modules/lazy-load']
]
}
Then you can start using @nuxt-modules/lazy-load
in your setup function!
<script setup lang="ts">
const { init } = useLazyLoad();
onMounted(() => {
init()
})
</script>
Lastly, let's add a lazy
class and change src
attribute to data-src
<img class="lazy" data-src="https://path-to-image.jpg"/>
Development
- Clone this repository
- Install dependencies using
yarn install
or npm install
- Start development server using
yarn dev
or npm run dev
License
MIT License