@nuxt-modules/lazy-load

Lazy Loading Images module for Nuxt 3

• ✨  Release Notes
• 📖  Read the documentation

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 # yarn
npm i @nuxt-modules/lazy-load # npm

Basic usage

Firstly, you need to add @nuxt-modules/lazy-load to your Nuxt config.

// nuxt.config.js

{
  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

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev

License

MIT License