Redirect back from page if layout doesn't exist

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -18,6 +18,7 @@
     </portal>
 
     <grid
+      v-if="blocks"
       v-bind="$props"
       :errors="errors"
       :record="record"
@@ -159,7 +160,7 @@ export default {
       layouts: [],
       layout: undefined,
       layoutButtons: new Set(),
-      blocks: [],
+      blocks: undefined,
     }
   },
 
@@ -230,10 +231,11 @@ export default {
 
     'page.pageID': {
       immediate: true,
-      handler () {
+      handler (pageID) {
+        if (pageID === NoID) return
+
         this.layouts = this.getPageLayouts(this.page.pageID)
         this.layout = undefined
-        this.blocks = []
 
         this.determineLayout()
       },
@@ -390,6 +392,11 @@ export default {
         return this.$auth.user.roles.some(roleID => roles.includes(roleID))
       })
 
+      if (!this.layout) {
+        this.toastWarning('No page layout, create one to view the page')
+        return this.$router.go(-1)
+      }
+
       const { config = {} } = this.layout
       const { buttons = [] } = config
 

client/web/compose/src/views/Public/Pages/View.vue

@@ -48,6 +48,7 @@
     </portal>
 
     <div
+      v-if="blocks"
       class="flex-grow-1 overflow-auto d-flex px-2 w-100"
     >
       <router-view
@@ -118,7 +119,7 @@ export default {
     return {
       layouts: [],
       layout: undefined,
-      blocks: [],
+      blocks: undefined,
     }
   },
 
@@ -171,10 +172,11 @@ export default {
   watch: {
     'page.pageID': {
       immediate: true,
-      handler () {
+      handler (pageID) {
+        if (pageID === NoID) return
+
         this.layouts = []
         this.layout = undefined
-        this.blocks = []
 
         if (!this.isRecordPage) {
           this.determineLayout()
@@ -253,6 +255,11 @@ export default {
         return this.$auth.user.roles.some(roleID => roles.includes(roleID))
       })
 
+      if (!this.layout) {
+        this.toastWarning('No page layout, create one to view the page')
+        return this.$router.go(-1)
+      }
+
       const { meta = {} } = this.layout || {}
       const title = meta.title || this.page.title
       document.title = [title, this.namespace.name, this.$t('general:label.app-name.public')].filter(v => v).join(' | ')