Lazy loading image in vue js

Hello buddy, in this article we will learn about how to lazy load the image in vue.js, lazy loading images are needed when we are loading a large number of data, it will improve the data fetching.

We will implement lazy loading images via vlazy in vue js, to install vlazy in vue js run the below command

npm i vue-lazyload

The above command will install the vue lazy in your vue.

Now will import it in our vue template like the below one.

 import VLazyImage from "v-lazy-image/v2";

Now register it to the components like below

components: {     
            VLazyImage,
        },

Add few css for more impact like the below one

<style lang="scss" scoped>
    .v-lazy-image {
        filter: blur(10px);
        transition: filter 0.7s;
    }

    .v-lazy-image-loaded {
        filter: blur(0);
    }
</style>

It’s time to use the template in your vue component, as I have used in my code.

<v-lazy-image :src="your-image-path" :src-placeholder="require('@/assets/images/front/product/placeholder.jpg')" />

Here you have seen that I have passed the image in placeholder you can pass your image location which will see the lazy load.

Full code

<template>
    <div style="height: inherit">
      <v-lazy-image :src="your-image-path" :src-placeholder="require('@/assets/images/front/product/placeholder.jpg')" />
    </div>
</template>

<script>
    import VLazyImage from "v-lazy-image/v2";
    
    export default {
       
        components: {
            // SFC
           
            VLazyImage,
            
        },
       
    }

</script>


<style lang="scss" scoped>
    .v-lazy-image {
        filter: blur(10px);
        transition: filter 0.7s;
    }

    .v-lazy-image-loaded {
        filter: blur(0);
    }

</style>

I hope now you understood how we can use vlazy in vue js to load our images, I have tried to explain it in the easiest manner.