feat: add custom error page

layouts/error.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <h3 v-if="error.customMessage">{{ error.customMessage }}</h3>
+    <h3 v-else-if="error.statusCode === 404">Page not found...</h3>
+    <h3 v-else>Sorry, an error occurred :-(</h3>
+    <nuxt-link to="/">Back to the home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: Object
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  text-align: center;
+}
+h3 {
+  padding: 10px 0 40px;
+}
+</style>

pages/weather/_citycode.vue

@@ -24,7 +24,7 @@ export default {
   async asyncData ({ app, error, params, store }) {
     const citycode = store.state.cities.find((city) => city.toLowerCase() === params.citycode)
     if (!citycode) {
-      return error({ message: 'City not found', statusCode: 404 })
+      return error({ customMessage: `City « ${params.citycode} » not found...`, statusCode: 404 })
     }
 
     store.commit('SET_CITY', citycode.toLowerCase())