no content fallback

assets/scss/style.scss

@@ -133,6 +133,10 @@
   box-shadow: 0 0 64px 64px $color;
 }
 
+.no-content-text {
+  color: $color__neutral-800;
+}
+
 .selected-indicator {
   @media (min-width: $bp__layout) {
     &::before {

pages/galleries.vue

@@ -1,16 +1,21 @@
 <template>
-  <GalleryPage v-if="galleries" :galleries="galleries">
+  <GalleryPage v-if="galleries && galleries.length > 0" :galleries="galleries">
   </GalleryPage>
+  <NoContent v-else heading="My Galleries"
+             message="My galleries are being prepared for upload, please check back soon."
+  />
 </template>
 
 <script>
 import GalleryPage from '@/components/GalleryPage'
+import NoContent from '@/components/NoContent'
 
 export default {
   name: 'GalleriesPage',
 
   components: {
-    GalleryPage
+    GalleryPage,
+    NoContent,
   },
 
   data () {
@@ -31,11 +36,14 @@ export default {
   },
 
   async asyncData ({ $axios }) {
-    let { galleries } = await $axios.$get('/api/v1/galleries')
+    try {
-    return { galleries }
+      let { galleries } = await $axios.$get('/api/v1/galleries')
+      return { galleries }
+    } catch {
+      return {
+        galleries: []
+      }
+    }
   },
 }
 </script>
-
-<style scoped lang="scss">
-</style>

pages/services.vue

@@ -1,6 +1,7 @@
 <template>
   <ContentPage heading="My Services">
-    <BackgroundImagePreloader v-if="showPreloaderBackground" slot="background"
+    <BackgroundImagePreloader v-if="showPreloaderBackground && backgroundImageUrls.length > 0"
+                              slot="background"
                               class="background-preloader"
                               :image-urls="backgroundImageUrls"
                               :active-index="activeIndex"
@@ -14,7 +15,7 @@
       <div slot="overlay" class="background-tint background preloader-overlay"></div>
     </BackgroundImageLoader>
 
-    <ul class="services-list">
+    <ul v-if="services.length > 0" class="services-list">
       <li v-for="(service, index) in services"
           :key="index"
           class="services-list__item"
@@ -34,6 +35,9 @@
         </div>
       </li>
     </ul>
+    <div v-else class="no-services">
+      <p class="no-content-text">Please check back soon for information on the services I provide.</p>
+    </div>
   </ContentPage>
 </template>
 
@@ -87,10 +91,21 @@ export default {
   },
 
   async asyncData ({ $axios }) {
-    let { services } = await $axios.$get('api/v1/services')
+    try {
-    let { imageUrl } = await $axios.$get('api/v1/page/services')
+      const { services } = await $axios.$get('api/v1/services')
+      let { imageUrl } = await $axios.$get('api/v1/page/services')
 
-    return { services, imageUrl }
+      if (!imageUrl) {
+        imageUrl = '/img/default-home.jpg'
+      }
+
+      return { services, imageUrl }
+    } catch {
+      return {
+        services: [],
+        imageUrl: '/img/default-home.jpg',
+      }
+    }
   },
 }
 </script>
@@ -251,5 +266,13 @@ export default {
 .preloader-overlay {
   z-index: 10;
 }
+
+.no-services {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+}
 </style>