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

npm add vue-progressive-image@beta

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>