Maintenance mode

src/router.js

@@ -1,22 +1,40 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Index from './views/index.vue'
-import Error404 from './views/errors/404.vue'
+
+import Error404 from './views/errors/error404.vue'
+import Maintenance from './views/errors/maintenance.vue'
 
 Vue.use(Router)
 
-const router = new Router({
-  mode: 'history',
-  routes: [
-    {
-      path: '/',
-      name: 'index',
-      component: Index
-    },
+/**
+ * Routing
+ */
+let routes = [
+  {
+    path: '/',
+    component: Index
+  },
+  {
+    path: '*',
+    component: Error404,
+  }
+];
+
+/**
+ * Down for maintenance mode via .env
+ */
+if (process.env.VUE_APP_MAINTENANCE_MODE) {
+  routes = [
     {
       path: '*',
-      component: Error404,
-    },
-  ]
+      component: Maintenance,
+    }
+  ];
+}
+
+let router = new Router({
+  mode: 'history',
+  routes,
 })
 export default router

src/views/errors/maintenance.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="container px-4 pt-20 text-center">
+      <h1 class="text-3xl md:text-6xl font-bold text-gray-200">
+        Down for maintenance
+      </h1>
+      <p class="max-w-md mx-auto">
+        Sorry, we're down for scheduled maintenance. Please&nbsp;check&nbsp;back&nbsp;soon.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Maintenance',
+  components: {
+  },
+  metaInfo() {
+    return {
+      title: this.$siteName,
+    };
+  },
+}
+</script>