Create static 404 page

This requires disabling subfolders in the nuxt generate config and then creating a 404 page.

layouts/error.vue

@@ -1,21 +1,22 @@
 <template>
-  <div class="container">
+  <div class="error-container">
     <h1 v-if="error.statusCode === 404" class="title is-1 has-text-centered">
       Page not found
     </h1>
     <h1 v-else class="title is-1 has-text-centered">
       An error occurred
     </h1>
     <div class="buttons is-centered">
-      <nuxt-link to="/" tag="button" class="button is-info">
-        Home page
+      <nuxt-link to="/" tag="a" class="button is-info">
+        Home
       </nuxt-link>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'ErrorPage',
   props: {
     error: {
       type: Object,
@@ -26,7 +27,7 @@ export default {
 </script>
 
 <style scoped>
-  .container {
+  .error-container {
     margin-top: 2em;
     margin-bottom: 2em;
   }

nuxt.config.js

@@ -62,7 +62,7 @@ export default {
   * Generate dynamic routes for static site generations
   */
   generate: {
-    fallback: true,
+    subFolders: false,
     routes: generateRoutes
   },
   /*

pages/404.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="error-container">
+    <h1 class="title is-1 has-text-centered">
+      Page not found
+    </h1>
+    <div class="buttons is-centered">
+      <nuxt-link to="/" tag="a" class="button is-info">
+        Home
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorPage',
+  props: {
+    error: {
+      type: Object,
+      default: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .error-container {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+</style>

store/index.js

@@ -36,14 +36,14 @@ export const actions = {
   async nuxtServerInit({ commit }) {
     // get site settings, and whether or not posts have a previous or next post
     // use this for both static and universal apps
+    const settings = await ghostAPI().settings.browse()
+    const tags = await ghostAPI().tags.browse({ limit: 'all' })
+    const authors = await ghostAPI().authors.browse({ limit: 'all' })
     const posts = await ghostAPI().posts.browse({
       limit: 'all',
       fields: 'slug,title'
     })
 
-    const tags = await ghostAPI().tags.browse({ limit: 'all' })
-    const authors = await ghostAPI().authors.browse({ limit: 'all' })
-
     // append next and previous slugs (for links in a post) to next and previous posts
     const postsWithLinks = posts.map((post, index) => {
       const prevSlug = posts[index - 1] ? posts[index - 1].slug : null
@@ -56,12 +56,10 @@ export const actions = {
       }
     })
 
-    const settings = await ghostAPI().settings.browse()
-
-    commit('setPostNav', postsWithLinks)
     commit('setSiteSettings', settings)
     commit('setSiteTags', tags)
     commit('setSiteAuthors', authors)
+    commit('setPostNav', postsWithLinks)
   },
   async getIndexPosts({ commit }, pagination) {
     // set desired fields for index lists (and tags/authors indices)

util/ghost.js

@@ -34,6 +34,16 @@ const generateRoutes = async () => {
   // initialize array of routes to be filled
   const routes = []
 
+  /*
+  ** 404 page with access to site settings for navigation
+  */
+
+  const settings = await api.settings.browse()
+  routes.push({
+    route: '/404',
+    payload: settings
+  })
+
   /*
   *
   * Create post index pages (with only subset of post data)