Some time ago I wanted to apply lazy loading in images in order to load them only when they enter the viewport.

Researching I found different ways to do it, but they were a bit more cumbersome than what I wanted.

I wanted something as simple as having the same <img> tag that gets lazy loaded.

That’s why I created v-lazy-image, a Vue.js component that extends the <img> tag API and applies lazy loading.

To use it, once you install it by running npm install v-lazy-image, you can add it globally to your project:

// main.js
import Vue from "vue";
import { VLazyImagePlugin } from "v-lazy-image";

Vue.use(VLazyImagePlugin);

#vue #vue.js #programming