Display an error if the character can't be found or viewed

app/imports/ui/creature/character/CharacterSheet.vue

@@ -2,7 +2,35 @@
   <div class="character-sheet fill-height">
     <v-fade-transition mode="out-in">
       <div
-        v-if="$subReady.singleCharacter"
+        v-if="!$subReady.singleCharacter"
+        key="character-loading"
+        class="fill-height layout justify-center align-center"
+      >
+        <v-progress-circular
+          indeterminate
+          color="primary"
+          size="64"
+        />
+      </div>
+      <div
+        v-else-if="!creature"
+      >
+        <v-layout
+          column
+          align-center
+          justify-center
+        >
+          <h2 style="margin: 48px 28px 16px">
+            Character not found
+          </h2>
+          <h3>
+            Either this character does not exist, or you don't have permission
+            to view it.
+          </h3>
+        </v-layout>
+      </div>
+      <div
+        v-else
         key="character-tabs"
         class="fill-height"
       >
@@ -29,17 +57,6 @@
           </v-tab-item>
         </v-tabs-items>
       </div>
-      <div
-        v-else
-        key="character-loading"
-        class="fill-height layout justify-center align-center"
-      >
-        <v-progress-circular
-          indeterminate
-          color="primary"
-          size="64"
-        />
-      </div>
     </v-fade-transition>
   </div>
 </template>
@@ -94,7 +111,7 @@
 				},
 			},
 			creature(){
-				return Creatures.findOne(this.creatureId) || {};
+				return Creatures.findOne(this.creatureId);
 			},
       editPermission(){
         try {

app/imports/ui/creature/character/CharacterSheetToolbarExtension.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <v-tabs
+    v-if="creature"
     slot="extension"
     :value="value"
     centered
@@ -29,13 +30,20 @@
 </template>
 
 <script>
+import Creatures from '/imports/api/creature/Creatures.js';
+
 export default {
   props: {
     value: {
       type: Number,
       required: true,
     },
-  }
+  },
+  meteor: {
+    creature(){
+      return Creatures.findOne(this.$route.params.id);
+    },
+  },
 }
 </script>
 

app/imports/ui/creature/character/CharacterSheetToolbarItems.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <v-toolbar-items>
+  <v-toolbar-items v-if="creature">
     <v-btn
       flat
       icon
@@ -142,7 +142,7 @@ export default {
       },
     },
     creature(){
-      return Creatures.findOne(this.creatureId) || {};
+      return Creatures.findOne(this.creatureId);
     },
     editPermission(){
       try {