diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
index aa8c1d9..b152417 100644
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@@ -47,7 +47,7 @@ import Notifications from "./common/Notifications.vue"
 import SeoMeta from '../mixins/seo-meta.js'
 
 // Load layout components dynamically.
-const requireContext = import.meta.glob('../layouts/**.vue')
+const requireContext = import.meta.glob('../layouts/**.vue', { eager: true })
 
 const layouts = {}
 Object.keys(requireContext)
@@ -86,7 +86,7 @@ export default {
       confirmationCancel: null
     }
   }),
-  
+
   mounted () {
     this.$loading = this.$refs.loading
   },
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index c5e6dbc..51b3216 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -86,7 +86,13 @@ async function beforeEach (to, from, next) {
   callMiddleware(middleware, to, from, (...args) => {
     // Set the application layout only if "next()" was called with no args.
     if (args.length === 0) {
-      router.app.setLayout(components[0].layout || '')
+      if (components[0].layout) {
+        router.app.setLayout(components[0].layout)
+      } else if (components[0].default && components[0].default.layout) {
+        router.app.setLayout(components[0].default.layout)
+      } else {
+        router.app.setLayout('')
+      }
     }
 
     next(...args)