Vue.js Progressive Image Loading Plugin

Install & Download:

$ npm install vue-progressive-image

Description:

A Vue.js 3 plugin that has the ability to progressively load images with a blur effect just as you have seen on Medium.com.

How to use it:

1. Import and register the plugin.

//  locally
import "vue-progressive-image/dist/style.css";
import { ProgressiveImage } from "vue-progressive-image";

// globally
import "vue-progressive-image/dist/style.css"; 
import VueProgressiveImage from 'vue-progressive-image'
createApp(App).use(VueProgressiveImage).mount("#app");

2. Add the VueProgressiveImage to the template and specify the path to your image as follows:

<template>
  <ProgressiveImage src="1.jpg" />
</template>

3. Default props.

src: String,
placeholderSrc: String,
fallbackSrc: String,
alt: String,
title: String,
customClass: String,
blur: [Number, String],
lazyPlaceholder: {
  type: Boolean,
  default: false,
},
delay: {
  type: [Number, String],
  default: 0,
},
objectCover: {
  type: Boolean,
  default: false,
},