Add asyncData method

Author: superdevops233

resources/js/layouts/error.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="error-layout text-center mt-4">
+    <h1>{{ $t('error_alert_title') }}</h1>
+    <p>{{ $t('error_alert_text') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorLayout'
+}
+</script>

resources/js/pages/home.vue

@@ -9,9 +9,18 @@
 </template>
 
 <script>
+// import axios from 'axios'
 export default {
   middleware: 'auth',
 
+  // async asyncData () {
+  //   const { data: projects } = await axios.get('/api/projects')
+
+  //   return {
+  //     projects
+  //   }
+  // },
+
   metaInfo () {
     return { title: this.$t('home') }
   }

resources/js/router/index.js

@@ -74,6 +74,9 @@ async function beforeEach (to, from, next) {
   // Get the middleware for all the matched components.
   const middleware = getMiddleware(components)
 
+  // Load async data for all the matched components.
+  await asyncData(components)
+
   // Call each middleware.
   callMiddleware(middleware, to, from, (...args) => {
     // Set the application layout only if "next()" was called with no args.
@@ -85,6 +88,37 @@ async function beforeEach (to, from, next) {
   })
 }
 
+/**
+ * @param  {Array} components
+ * @return {Promise<void>
+ */
+async function asyncData (components) {
+  for (let i = 0; i < components.length; i++) {
+    const component = components[i]
+
+    if (!component.asyncData) {
+      continue
+    }
+
+    const dataFn = component.data
+
+    try {
+      const asyncData = await component.asyncData()
+
+      component.data = function () {
+        return {
+          ...(dataFn ? dataFn.apply(this) : {}),
+          ...asyncData
+        }
+      }
+    } catch (e) {
+      component.layout = 'error'
+
+      console.error('Failed to load asyncData', e)
+    }
+  }
+}
+
 /**
  * Global after hook.
  *