changes

app/error.vue

@@ -0,0 +1,63 @@
+<script setup>
+const props = defineProps({
+  error: Object,
+});
+console.error(props.error);
+const router = useRouter();
+const { $createMeta } = useNuxtApp();
+const description =
+  "Rất tiếc! Có vẻ như đã xảy ra sự cố. Vui lòng thử lại hoặc liên hệ quản trị viên nếu lỗi tiếp tục.";
+useHead(
+  $createMeta({
+    title: props.error.message,
+    description,
+    image: "/favicon.svg",
+    type: "website",
+  }),
+);
+
+function reload() {
+  window.location.reload();
+}
+</script>
+
+<template>
+  <div
+    class="container h-dvh is-flex is-gap-2 is-flex-direction-column is-justify-content-center is-align-items-center"
+  >
+    <Icon
+      name="material-symbols:warning-rounded"
+      :size="50"
+    />
+    <h1 class="font-semibold is-size-3">Đã xảy ra sự cố</h1>
+    <p class="has-text-grey">
+      {{ description }}
+    </p>
+    <div class="buttons">
+      <button
+        @click="reload"
+        class="button"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:refresh-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Thử lại</span>
+      </button>
+      <button
+        @click="router.push('/')"
+        class="button"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:home-outline-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Trang chủ</span>
+      </button>
+    </div>
+  </div>
+</template>