suspense topic

Author: nareshnist

src/components/slots/BaseCard.vue

@@ -1,40 +1,36 @@
 <template>
     <div class="card shadow-none p-3 m-5 rounded ">
-            <div class="card-header" v-if="$slots.default">
-                <slot></slot>
-            </div>
-         <div class="card-body">
+        <div class="card-header" v-if="$slots.default">
+            <slot></slot>
+        </div>
+        <div class="card-body">
             <slot name="body">
                 <div class="alert alert-danger">
                     default content
                 </div>
             </slot>
-         </div>
-
-         
-         <div class="card-footer" v-if="$slots.footer">
-            <slot name="footer"  :count="count"></slot>
-         </div>
+        </div>
+        <div class="card-footer" v-if="$slots.footer">
+            <slot name="footer" :count="count"></slot>
+        </div>
     </div>
- </template>
- 
- <script setup>
+</template>
+
+<script setup>
 import { ref } from 'vue';
 
 
- const count = ref(0);
+const count = ref(0);
 
- const id = setInterval(() => {
-    count.value  = count.value  + 10;
+const id = setInterval(() => {
+    count.value = count.value + 10;
 
-    if(count.value > 300){
+    if (count.value > 300) {
         clearInterval(id);
     }
-    
- }, 3000);
-
- </script>
- 
- <style>
- 
- </style>
+
+}, 3000);
+
+</script>
+
+<style></style>

src/components/slots/SlotChild.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="container">
     <BaseCardVue>
-      
-
-
-
         <template #[slotName]>
           <h1>card content</h1>
           <h2>{{ username }}</h2>

src/components/suspense/UserDashboard.vue

@@ -15,7 +15,7 @@ import { ref } from 'vue'
 // Simulating API calls
 
 const fetchUser = () => {
-    return new Promise((reslove) => {
+    return new Promise((reslove,reject) => {
         setTimeout(() => {
             reslove({ id: 1, name: "naresh jupalle", email: "naresh.jupalle410@gmail.com" });
         }, 1000);
@@ -31,8 +31,16 @@ const fetchPosts = (userId) => new Promise(resolve =>
 
 // Async setup
 
-console.log(await fetchUser())
-console.log(await fetchPosts())
-const user = ref(await fetchUser())
-const posts = ref(await fetchPosts(user.value.id))
+// console.log(await fetchUser())
+// console.log(await fetchPosts())
+const user = ref(null);
+const posts = ref(null)
+try {
+    user.value = await fetchUser()
+   posts.value = await fetchPosts(user.value.id)
+}catch(e) {
+    console.log("an error occured")
+    console.log(e);
+}
+
 </script>

src/components/suspense/vueSuspens.vue

@@ -1,6 +1,7 @@
 <template>
 
-<Suspense>
+<!-- @error-captured="handleError" -->
+<Suspense >
 <template #default>
     <user-dashboard></user-dashboard>
 </template>
@@ -14,4 +15,22 @@
 
   <script setup>
   import UserDashboard from './UserDashboard.vue';
+import { onErrorCaptured } from 'vue';
+
+
+// one way of doing 
+// onErrorCaptured((error) => {
+//   debugger;
+//   console.log(error);
+// })
+
+// second listening event on suspense tag.
+
+// function handleError(error) {
+//   debugger
+//   console.log(error)
+// }
+
+
+
   </script>