Merge pull request #46 from TechLabs-Berlin/develop

Fixes on async fetching

pages/event/_slug.vue

@@ -5,7 +5,10 @@
         ><TIcon icon="chevron-left" class="inline-block" /> Back to the
         Timeline</NuxtLink
       >
-      <EventListItem :tl-event="event[0]" show-resources />
+      <WrapperContentBox v-if="$fetchState.pending"
+        >Loading...</WrapperContentBox
+      >
+      <EventListItem v-else :tl-event="event[0]" show-resources />
     </div>
   </main>
 </template>
@@ -14,19 +17,22 @@
 import {
   defineComponent,
   useContext,
-  useAsync,
+  useFetch,
   useRoute,
+  ref,
 } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup() {
     const { $content } = useContext()
     const route = useRoute()
-    const event = useAsync(() =>
-      $content('/events')
-        .where({ slug: route.value.params.slug })
-        .limit(1)
-        .fetch()
+    const event = ref('')
+    useFetch(
+      async () =>
+        (event.value = await $content('/events')
+          .where({ slug: route.value.params.slug })
+          .limit(1)
+          .fetch())
     )
 
     return {

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="h-full bg-gray-50">
-    <div class="w-full main-grid">
+    <div v-if="!$fetchState.pending" class="w-full main-grid">
       <div class="w-64 mx-auto timeline">
         <h3 class="md:hidden title-with-lines">Timeline</h3>
         <Timeline
@@ -28,15 +28,25 @@
 </template>
 
 <script>
-import { useAsync, defineComponent, useContext } from '@nuxtjs/composition-api'
+import {
+  useFetch,
+  defineComponent,
+  useContext,
+  ref,
+} from '@nuxtjs/composition-api'
 export default defineComponent({
   setup() {
     const { $content } = useContext()
-    const events = useAsync(() => $content('/events').sortBy('date').fetch())
-    const timeline = useAsync(() => $content('timeline').fetch())
-    const milestones = useAsync(() =>
-      $content('/milestones').sortBy('deadline').fetch()
-    )
+    const events = ref()
+    const timeline = ref()
+    const milestones = ref()
+    useFetch(async () => {
+      events.value = await $content('/events').sortBy('date').fetch()
+      timeline.value = await $content('timeline').fetch()
+      milestones.value = await $content('/milestones')
+        .sortBy('deadline')
+        .fetch()
+    })
 
     return {
       events,