Add FetchData component

resources/assets/js/app.js

@@ -27,6 +27,8 @@ window.axios.defaults.headers.common = {
      * or customize the JavaScript scaffolding to fit your unique needs.
      */
 
+    Vue.component('fetch-data', require('./components/FetchData'));
+
     new Vue({
         el: '#app',
         data () {
@@ -48,5 +50,5 @@ window.axios.defaults.headers.common = {
             'invite-team': require('./components/dashboard/InviteTeam'),
             'metric-chart': require('./components/status-page/Metric'),
         }
-    })
+    });
 })()

resources/assets/js/components/FetchData.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+    props: ['url'],
+    data() {
+        return {
+            loaded: false,
+            response: null,
+        }
+    },
+    created() {
+        axios.get(this.url)
+            .then((response) => {
+                this.response = response
+                this.loaded = true
+            })
+    },
+    render() {
+        if (!this.loaded) {
+            return this.$scopedSlots.default({
+                loading: true,
+                response: null,
+            })
+        }
+
+        return this.$scopedSlots.default({
+            loading: false,
+            response: this.response.data,
+        })
+    },
+}
+</script>