Improve Error Page

pages/blog/_slug.vue

@@ -120,8 +120,12 @@ export default {
       liked: false
     }
   },
-  async asyncData({ params, $content, app, $axios }) {
-    const post = await $content(`articles/${app.i18n.locale}/`, params.slug).fetch()
+  async asyncData({ params, $content, app, $axios, error }) {
+    const post = await $content(`articles/${app.i18n.locale}/`, params.slug)
+      .fetch()
+      .catch(() => {
+        error({ statusCode: 404, message: "Post not found" });
+      });
     const {data: likes} = await $axios.get(`posts/${params.slug}`)
     const liked = await $axios.get(`posts/is/${params.slug}`)
     return {

pages/blog/index.vue

@@ -112,9 +112,11 @@ export default {
   methods: {
     displayTags(tags) {
       const tags_label = []
-      tags.map(tag => {
-        tags_label.push(tag)
-      })
+      if (tags.length > 0) {
+        tags.map(tag => {
+          tags_label.push(tag)
+        })
+      }
       return tags_label
     },
     async fetchPostsByTag(tag) {

pages/work/_slug.vue

@@ -51,6 +51,7 @@
 
 <script>
 import WorkSkill from "~/components/WorkSkill";
+
 export default {
   components: {WorkSkill},
   head() {
@@ -63,14 +64,19 @@ export default {
       work: null
     }
   },
-  async asyncData({ params, $content }) {
-    let work
-    try {
-      work = await $content('works', params.slug).fetch()
-    } catch (e) {
-      return error({ message: 'Work not found' })
+  async asyncData({ params, $content, error }) {
+    const work = await $content('works', params.slug)
+      .fetch()
+      .catch(() => {
+        error({
+          statusCode: 404,
+          message: 'Work not found',
+        })
+      });
+    let skills = []
+    if (work) {
+      skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
     }
-    const skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
     return {
       work,
       skills