src/store/actions.js

@@ -2,8 +2,14 @@ import axios from "axios";
 
 export default {
   getFruits: async ({ commit }) => {
-    const response = await axios.get("http://localhost:3000/fruit");
-    commit("setFruits", response.data.data);
+    await axios
+      .get("http://localhost:3000/fruit")
+      .then(res => {
+        commit("setFruits", res.data.data);
+      })
+      .catch(err => {
+        if (err.message === "Network Error") throw "Check API connectivity ...";
+      });
   },
   getFruit: async ({ commit }, id) => {
     const response = await axios.get(`http://localhost:3000/fruit/${id}`);

src/views/Fruit.vue

@@ -128,7 +128,7 @@ article {
 
 .alert {
   margin-top: 1.75rem;
-  background-color: lighten(@color-1, 10%);
+  background: linear-gradient(112.4deg, #1c9797 11.05%, #147171 89.93%);
   color: @color-2;
   padding: 1rem 1.5rem;
   border-radius: 4px;

src/views/Fruits.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="fruits">
     <h2>Directory</h2>
-    <Grid :data="this.fruits" />
+    <Grid v-if="!error" :data="this.fruits" />
+    <div class="alert" v-else>
+      {{ error }}
+      <pre><span>$</span> yarn run api</pre>
+    </div>
   </div>
 </template>
 
@@ -15,15 +19,45 @@ export default {
   computed: {
     ...mapState(["fruits"])
   },
+  data() {
+    return {
+      error: null
+    };
+  },
   async created() {
-    await this.$store.dispatch("getFruits");
+    await this.$store.dispatch("getFruits").catch(err => (this.error = err));
   }
 };
 </script>
 
-<style lang="less">
+<style scoped lang="less">
 .fruits {
   margin: 0 auto;
   max-width: 1200px;
 }
+
+.alert {
+  box-sizing: border-box;
+  margin: 0 auto;
+  width: 80%;
+  background-color: #d63031;
+  color: @color-2;
+  padding: 1rem 1.5rem;
+  border-radius: 4px;
+
+  @media screen and (min-width: @sm) {
+    width: 50%;
+    max-width: 535px;
+  }
+
+  pre {
+    padding: 1rem;
+    border-radius: 4px;
+    background-color: rgb(45, 48, 55);
+
+    span {
+      color: @color-3;
+    }
+  }
+}
 </style>