Lazy load images to improve perceived performance.
If you have a view that has lot of images, you may observe high initial page load time and stuttering. Vue has to get the comparably larger payload to paint the UI, and this takes time.
The easiest way of lazy loading images is by using an package called
First, install the package -
npm install vue-lazyload
Next, load this with Vue.
// main.js import Vue from "vue"; import VueLazyload from "vue-lazyload"; // other code Vue.use(VueLazyload);
Finally, use lazy loading in your components.
<img v-lazy="car.jpg" />