API connection error handling

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>