changes

app/components/Modal.vue

@@ -15,6 +15,7 @@
         class="modal-card max-w-8xl"
         :style="{
           width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
+          height,
         }"
       >
         <header
@@ -31,11 +32,26 @@
             @click="closeModal"
           ></button>
         </header>
-        <section
-          class="modal-card-body p-4"
-          :style="{ minHeight: height }"
-        >
-          <Suspense>
+        <section class="modal-card-body p-4">
+          <div
+            v-if="error"
+            class="size-full is-flex"
+          >
+            <div class="w-full is-flex is-flex-direction-column is-gap-1">
+              <p class="has-text-danger-40">Đã có lỗi khi tải dữ liệu:</p>
+              <pre>{{ error }}</pre>
+              <button
+                @click="closeModal"
+                class="button ml-auto max-w-fit"
+              >
+                Đóng
+              </button>
+            </div>
+          </div>
+          <Suspense
+            v-else
+            @resolve="loaded = true"
+          >
             <component
               :is="resolvedComponent"
               v-bind="vbind"
@@ -134,6 +150,17 @@ onUnmounted(() => {
   const remaining = document.getElementsByClassName("modal-background").length;
   if (remaining === 0) document.documentElement.classList.remove("is-clipped");
 });
+
+const loaded = ref(false);
+const error = ref();
+onErrorCaptured((err) => {
+  // catch loading errors to display
+  if (!loaded) {
+    console.error(err);
+    error.value = err.message;
+    return false; // prevent propagating up further
+  }
+});
 </script>
 <style scoped>
 .modal {