refactored background image loading into separate component

components/BackgroundImageLoader.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="background-image">
+  <div class="background-image-loader">
+    <div class="background-container">
+      <div class="background background-loading"
+           :style="loadingStyle"></div>
+      <div class="background background-img"
+           :style="backgroundStyle"></div>
+    </div>
   </div>
 </template>
 
@@ -8,7 +14,22 @@ import imageLoader from '~/mixins/imageLoader.js'
 
 export default {
   mixins: [ imageLoader ],
+
   props: {
+    bgLoading: {
+      type: String,
+      required: false,
+      default: function () {
+        return 'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)'
+      }
+    },
+    img: {
+      type: String,
+      required: false,
+      default: function () {
+        return 'url(https://via.placeholder.com/1920x1080)'
+      }
+    },
   },
 
   data () {
@@ -16,6 +37,19 @@ export default {
     }
   },
 
+  computed: {
+    loadingStyle () {
+      return {
+        background: this.bgLoading
+      }
+    },
+    backgroundStyle () {
+      return {
+        backgroundImage: this.img
+      }
+    }
+  },
+
   methods: {
   }
 }
@@ -23,11 +57,23 @@ export default {
 
 <style lang="scss" scoped>
 
-.background-image {
+.background-image-loader {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.background {
   position: absolute;
   width: 100%;
   height: 100%;
-  left: 0;
   top: 0;
+  left: 0;
+}
+
+.background-img {
+  background-size: cover;
+  background-position: center center;
+  opacity: .5;
 }
 </style>

components/ContentPage.vue

@@ -2,16 +2,12 @@
   <article class="content-page">
     <h1 class="page-heading">{{ heading }}</h1>
     <section class="content-container">
-      <div class="content">
+      <div v-if="$slots.default" class="content">
         <slot></slot>
       </div>
     </section>
-    <!-- TODO CHANGE THE BACKGROUND DIV TO A NAMED SLOT -->
+    <div v-if="$slots.background" class="background">
-    <div class="background background-container">
+      <slot name="background"></slot>
-      <div class="background background-loading"
-           :style="loadingStyle"></div>
-      <div class="background background-img"
-           :style="backgroundStyle"></div>
     </div>
   </article>
 </template>
@@ -19,20 +15,6 @@
 <script>
 export default {
   props: {
-    bgLoading: {
-      type: String,
-      required: false,
-      default: function () {
-        return 'linear-gradient(310deg, #35405d, #6174aa, #a8b3d0, #e2e5ef)'
-      }
-    },
-    img: {
-      type: String,
-      required: false,
-      default: function () {
-        return 'url(https://via.placeholder.com/1920x1080)'
-      }
-    },
     heading: {
       type: String,
       required: true
@@ -44,19 +26,6 @@ export default {
     }
   },
 
-  computed: {
-    loadingStyle () {
-      return {
-        background: this.bgLoading
-      }
-    },
-    backgroundStyle () {
-      return {
-        backgroundImage: this.img
-      }
-    }
-  },
-
   methods: {
   }
 
@@ -116,10 +85,6 @@ $z-index-top: 10;
   color: #fff; // TEMP
 }
 
-.background-container {
-  z-index: $z-index-bottom
-}
-
 .page-heading {
   z-index: $z-index-top;
   position: relative;
@@ -131,16 +96,11 @@ $z-index-top: 10;
 }
 
 .background {
+  z-index: $z-index-bottom;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-
-.background-img {
-  background-size: cover;
-  background-position: center center;
-  opacity: .5;
-}
 </style>

pages/index.vue

@@ -1,16 +1,19 @@
 <template>
   <ContentPage heading="The Index Page Heading">
+    <BackgroundImageLoader slot="background" />
   </ContentPage>
 </template>
 
 <script>
 import ContentPage from '@/components/ContentPage'
+import BackgroundImageLoader from '@/components/BackgroundImageLoader'
 
 export default {
   name: 'HomePage',
 
   components: {
-    ContentPage
+    ContentPage,
+    BackgroundImageLoader
   },
 
   data() {