menu error + menu in layout

Author: Philip Snow

.DS_Store

@@ -1,5 +1,6 @@
 <template>
   <header class="site-header">
+    <p v-if="$store.state.menu === 'Please create a menu document'" class="logo">{{ $store.state.menu }}</p>
     <nuxt-link to="/" class="logo">{{ $prismic.asText($store.state.menu.title) }}</nuxt-link>
     <nav>
       <ul>

components/.DS_Store

@@ -1,15 +1,18 @@
 <template>
   <div>
+    <header-prismic/>
     <nuxt />
     <footer-prismic/>
   </div>
 </template>
 
 <script>
+import HeaderPrismic from '~/components/HeaderPrismic.vue'
 import FooterPrismic from '~/components/FooterPrismic.vue'
 
 export default {
   components: {
+    HeaderPrismic,
     FooterPrismic
   },
   head () {

components/HeaderPrismic.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <!-- Vue tag to add header component -->
-    <header-prismic/>
     <div class="container">
       <h1>Page not found</h1>
       <p>Sorry we were unable to find the page you are looking for.</p>
@@ -11,14 +9,7 @@
 </template>
 
 <script>
-import HeaderPrismic from '../components/HeaderPrismic.vue'
-import FooterPrismic from '~/components/FooterPrismic.vue'
-
 export default {
   name: 'NotFound',
-  components: {
-    HeaderPrismic,
-    FooterPrismic
-  }
 }
 </script>

layouts/.DS_Store

@@ -0,0 +1,28 @@
+<template>
+  <div class="homepage">
+    <header-prismic/>
+    <nuxt />
+    <footer-prismic/>
+  </div>
+</template>
+
+<script>
+import HeaderPrismic from '~/components/HeaderPrismic.vue'
+import FooterPrismic from '~/components/FooterPrismic.vue'
+
+export default {
+  components: {
+    HeaderPrismic,
+    FooterPrismic
+  },
+  head () {
+    return {
+      title: 'Prismic Nuxt.js Multi Page Website',
+    }
+  },
+  // Called before rendering the layout (even for error page)
+  async middleware({ store, $prismic }) {
+    await store.dispatch('fetchMenu', $prismic)
+  }
+}
+</script>

layouts/default.vue

@@ -1,7 +1,5 @@
 <template>
-  <section class="homepage">
-    <!-- Vue tag to add header component -->
-    <header-prismic/>
+  <section>
     <!-- Banner component -->
     <homepage-banner :banner="banner"/>
     <!-- Slices block component -->
@@ -11,16 +9,15 @@
 
 <script>
 // Imports for all components
-import HeaderPrismic from '~/components/HeaderPrismic.vue'
 import HomepageBanner from '~/components/HomepageBanner.vue'
 import SlicesBlock from '~/components/SlicesBlock.vue'
 
 export default {
   name: 'Home',
+  layout: 'homepage',
   components: {
-    HeaderPrismic,
     HomepageBanner,
-    SlicesBlock,
+    SlicesBlock
   },
   head () {
     return {

layouts/error.vue

@@ -1,22 +1,18 @@
 <template>
-  <section class="page">
-    <!-- Vue tag to add header component -->
-    <header-prismic/>
+  <section>
     <!-- Slices block component -->
     <slices-block :slices="slices"/>
   </section>
 </template>
 
 <script>
-// Imports for all components
-import HeaderPrismic from '~/components/HeaderPrismic.vue'
+// Imports for Prismic Slice components
 import SlicesBlock from '~/components/SlicesBlock.vue'
 
 export default {
   name: 'page',
   components: {
-    HeaderPrismic,
-    SlicesBlock,
+    SlicesBlock
   },
   head () {
     return {

layouts/homepage.vue

@@ -5,13 +5,22 @@ export const state = () => ({
 export const mutations = {
   SET_MENU(state, menu) {
     state.menu = menu
+  },
+  SET_ERROR(state, error) {
+    state.menu = error
   }
 }
 
 export const actions = {
   async fetchMenu({ commit }, $prismic) {
-    const menu = (await $prismic.api.getSingle('menu')).data
+    try {
+      const menu = (await $prismic.api.getSingle('menu')).data
 
-    commit('SET_MENU', menu)
+      commit('SET_MENU', menu)
+    } catch (e) {
+      const error = 'Please create a menu document'
+
+      commit('SET_ERROR', error);
+    }
   }
 }