MIrage + async fetch + suspense

src/App.vue

@@ -1,6 +1,13 @@
 <template>
   <div id="app">
-    <InboxScreen />
+    <suspense>
+      <template #default>
+        <InboxScreen />
+      </template>
+      <template #fallback>
+        Loading...
+      </template>
+    </suspense>
   </div>
 </template>
 

src/components/InboxScreen.vue

@@ -6,28 +6,11 @@
 
 <script>
   import MailTable from '@/components/MailTable.vue';
+  import { ref } from 'vue';
   export default {
-    setup(props, {attrs, slots}){
-      
-      let emails = [{
-        id: 1,
-        subject: 'First Steps',
-        body: 'Learning Vue with Vue 3, cool!',
-        read: false,
-        archived: false,
-      }, {
-        id: 2,
-        subject: 'Vue 3 - pretty cool',
-        body: 'Lots of really good features happening here',
-        read: false,
-        archived: false
-      }, {
-        id: 3,
-        subject: 'Do we have a released date?',
-        body: "I hear Q2 2020.",
-        read: true,
-        archived: false
-      }]
+    async setup(props, {attrs, slots}){
+      let response = await fetch('/api/emails');
+      let emails = await response.json();
 
       return {emails}
     },

src/main.js

@@ -1,4 +1,34 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
+import { Server } from "miragejs"
+
+new Server({
+  routes() {
+    this.namespace = 'api';
+
+    this.get('/emails', async () => {
+      return [{
+        id: 1,
+        subject: 'First Steps',
+        body: 'Learning Vue with Vue 3, cool!',
+        read: false,
+        archived: false,
+      }, {
+        id: 2,
+        subject: 'Vue 3 - pretty cool',
+        body: 'Lots of really good features happening here',
+        read: false,
+        archived: false
+      }, {
+        id: 3,
+        subject: 'Do we have a released date?',
+        body: "I hear Q2 2020.",
+        read: true,
+        archived: false
+      }]
+    }, {timing: 2000})
+  }
+})
+
 createApp(App).mount('#app');