Lazy Loading Images Implemented

nuxt.config.js

@@ -33,7 +33,8 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
-    {src: '@/plugins/materialize.js',ssr: false}
+    {src: '@/plugins/materialize.js',ssr: false},
+    {src: '@/plugins/vue-progessive-image.js',ssr: false}
   ],
   /*
   ** Nuxt.js dev-modules
@@ -48,7 +49,7 @@ export default {
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
     '@nuxtjs/axios',
-    '@nuxtjs/style-resources'
+    '@nuxtjs/style-resources',
   ],
   /*
   ** Axios module configuration

package.json

@@ -17,7 +17,8 @@
     "@nuxtjs/style-resources": "^1.0.0",
     "frontmatter-markdown-loader": "^3.4.2",
     "jquery": "^3.5.1",
-    "nuxt": "^2.0.0"
+    "nuxt": "^2.0.0",
+    "vue-progressive-image": "^3.2.0"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^2.0.0",

pages/faculties/index.vue

@@ -11,7 +11,13 @@
         <div class="col s12 m4 l6">
           <div class="card-panel hoverable">
             <div class="card-image center-align">
-              <img class="circle responsive-image" :src="`${c.url || '/download.png'}`">
+              <progressive-img
+                class="faculty-img circle responsive-image"
+                :src="`${c.url || '/download.png'}`"
+                placeholder="/download.png"
+                :alt="`${c.name}`"
+                :blur="30"
+              />
             </div>
             <div class="card-content center-align text">
               <p style="font-size:20px">
@@ -35,6 +41,7 @@
 </template>
 <script>
 import axios from 'axios'
+
 export default {
   async asyncData (context) {
     return await axios
@@ -49,6 +56,19 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.faculty-img {
+  width: 225px !important;
+  height: 225px !important;
+
+  img {
+    width: 225px!important;
+    height: 225px!important;
+    object-fit: cover;
+  }
+}
+</style>
 <style lang="scss" scoped>
 .card-panel {
   border-radius: 16px 16px 16px 16px;
@@ -60,11 +80,6 @@ export default {
   font-weight: bold;
   font-size: 16px;
 }
-img {
-  width: 225px;
-  height: 225px;
-  object-fit: cover;
-}
 a:hover {
   text-decoration: underline;
 }

plugins/vue-progessive-image.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueProgressiveImage from 'vue-progressive-image'
+
+Vue.use(VueProgressiveImage)