Lazy loading image component for Nuxt.js

Example.vue

<template>
<div>
<!-- Properties automatically map --> 
<LazyImage class="my-class" src="/some/asset.png" alt="" />
<!-- Can use property and event binding -->
<LazyImage class="my-class" :src="transform(myObj.imageSrc)" :alt="myObj.alt" @click="showMessage" />
</div>
</template>

LazyImage.vue

<template>
  <img
    class="lazyload"
    :data-src="src"
    src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
  />
</template>
<script>
export default {
  props: {
    src: { type: String, required: true }
  }
};
</script>

nuxt.config.js

// snippet for webpack url resolution on build
build: {
   extend(config, { isClient, isDev, loaders: { vue } }) {
      vue.transformAssetUrls.LazyImage = ["src", "src-set"]; 
   }
}

plugin-lazy-image.js

// registered in the nuxt.config.js under plugins: [ "@plugins/components.js"]

import Vue from "vue";
import LazyImage from "@/components/Content/LazyImage";
Vue.component("LazyImage", LazyImage) // or even Vue.component("img-lazy", LazyImage)