data mopved into asyncData() method

pages/contact.vue

@@ -69,7 +69,7 @@
 
     <BackgroundImageLoader slot="background"
                            class="background"
-                           image-url="https://via.placeholder.com/1920x1080"
+                           :image-url="imageUrl"
     >
       <div slot="overlay" class="background-tint background-overlay"></div>
     </BackgroundImageLoader>
@@ -156,6 +156,12 @@ export default {
       }, 1000)
     },
   },
+
+  asyncData () {
+    return new Promise ((resolve, reject) => {
+      resolve({ imageUrl: "https://via.placeholder.com/1920x1080" })
+    })
+  },
 }
 </script>
 

pages/services.vue

@@ -9,7 +9,7 @@
     </BackgroundImagePreloader>
     <BackgroundImageLoader v-else slot="background"
                            class="background"
-                           image-url="https://via.placeholder.com/1920x1080"
+                           :image-url="imageUrl"
     >
       <div slot="overlay" class="background-tint background preloader-overlay"></div>
     </BackgroundImageLoader>
@@ -55,6 +55,37 @@ export default {
     return {
       showPreloaderBackground: false,
       activeIndex: 0,
+    }
+  },
+
+  head () {
+    return {
+      title: 'My Services',
+      // TODO meta - hid, name, content
+    }
+  },
+
+  computed: {
+    backgroundImageUrls () {
+      return this.services.map(el => el.backgroundImageUrl)
+    },
+  },
+
+  mounted () {
+    const mq = window.matchMedia("(min-width: 40em)")
+    this.showPreloaderBackground = mq.matches
+  },
+
+  methods: {
+    handleMouseOver(index) {
+      this.activeIndex = index
+    },
+  },
+
+  asyncData () {
+    return new Promise((resolve, reject) => {
+      resolve({
+        imageUrl: "https://via.placeholder.com/1920x1080",
         services: [
           {
             'heading': 'Portraits',
@@ -85,31 +116,8 @@ export default {
             'linkUrl': 'galleries?gallery=3',
           },
         ]
-    }
+      })
-  },
+    })
-
-  head () {
-    return {
-      title: 'My Services',
-      // TODO meta - hid, name, content
-    }
-  },
-
-  computed: {
-    backgroundImageUrls () {
-      return this.services.map(el => el.backgroundImageUrl)
-    },
-  },
-
-  mounted () {
-    const mq = window.matchMedia("(min-width: 40em)")
-    this.showPreloaderBackground = mq.matches
-  },
-
-  methods: {
-    handleMouseOver(index) {
-      this.activeIndex = index
-    },
   },
 }
 </script>