A progressive image lazy loader with CSS animations for Vue.js – v-lazy-image

Category: Uncategorized Vue.js Vue.js Loaders | August 24, 2021
Author: alexjoverm
Official Page: Go to website
Last Update: August 24, 2021
License: MIT

vuejs lazy loader

Description:

v-lazy-image is a progressive image lazy loader with CSS animations for Vue.js. This component will load the image automatically when it enters the view port.

How to install and use the image lazy loader in my Vue.js project?

1. First of all, you will need to install the component in your project with npm.

npm install v-lazy-image

2. Then, import the required components.

#for Vue version 3
import VLazyImage from "v-lazy-image";

#for vue version 2
import VLazyImage from "v-lazy-image/v2";

3. code example.

export default {
  components: {
    VLazyImage
  }
};

4. Add the lazy load component in your template file. And, you will need to pass the src property with the link of the image.

<template>
  <v-lazy-image src="http://lorempixel.com/400/200/" />
</template>

And, you are done. 🙂