Get started

vue-progressive-image documentation page
Plugin for Vue that lazyload images out of the box and helps give immediate feedback to the user while content is loading.

Install

Requires Vue 3 installed

Add plugin locally

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "vue-progressive-image/dist/style.css"; // <--- very important!
​
createApp(App).mount("#app");
<script setup>
import { ProgressiveImage } from "vue-progressive-image";
</script>
​
<template>
<ProgressiveImage src="https://picsum.photos/id/1080/1980/1080" />
</template>

Add plugin globally

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import "vue-progressive-image/dist/style.css"; // <--- very important!
import VueProgressiveImage from 'vue-progressive-image'
​
createApp(App).use(VueProgressiveImage).mount("#app");
<template>
<ProgressiveImage src="https://picsum.photos/id/1080/1980/1080" />
</template>
Last modified 8mo ago