Blog Detail


Vue Lazy – A Lightweight Image Lazy Load Vue Component   cover image

arrow_back Vue Lazy – A Lightweight Image Lazy Load Vue Component

Images are a crucial part of every website and application nowadays. Whether it be marketing banners, product images, or logos, it is impossible to imagine a website without images. But large images have a bad impact on the performance of the page because they slow down your page load speed. So, we can use Lazy Loading Images as the solution to this problem.

Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time, when those images are needed, instead of loading them up front. So, there are many ways to utilize Lazy Load Images in your web applications. Bartosz Dominiak introduced an Image lazy load component based on Intersection API. It is a lightweight and easy-to-use Vue js component.


You can install this package via npm or yarn


yarn add vue-lazy


npm install vue-lazy 

Usage – Globally

import Vue from 'vue' 
import VueLazy from 'vue-lazy' 
import 'vue-lazy/dist/vue-lazy.css' 


Usage – Locally

import { LazyImage } from 'vue-lazy' 
import 'vue-lazy/dist/vue-lazy.css'  

export default { 

  components: { LazyImage } 



Here’s a demo of the lazy load image




  alt="example aternative text" 


Image with known width

You can also assign width and height to the image so it will prevent jumping content on the web page.



  alt="example aternative text" 







  alt="example aternative text" 



<source media="(min-width:1366px)" srcset=""> 

<source media="(min-width:1024px)" srcset=""> 



These are the following options available in this package.

Name Description Default
src string () => null
width string () => null
height string () => null
alt string () => null
srcset string () => null
intersectionConfig object {threshold: [0, 1]}
tag string () => ‘img’


If you want to know more about this package you can head over to its complete documentation on Github.

Published at : 16-08-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project