fix close alert, ffplayout#535

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+      <NuxtLayout>
+          <NuxtPage />
+      </NuxtLayout>
+  </div>
+</template>

assets/scss/main.scss

@@ -2,6 +2,7 @@
 @import 'bootstrap/scss/bootstrap';
 
 #__nuxt,
+#__nuxt > div,
 main,
 main > div {
     height: 100%;

error.vue

@@ -0,0 +1,35 @@
+<template>
+    <NuxtLayout>
+        <div class="container d-flex align-items-center justify-content-center">
+            <div v-if="props.error?.statusCode === 404">
+                <h1 class="display-1 text-center">404</h1>
+                <p class="text-center mt-10">Page not found</p>
+            </div>
+            <div v-else-if="props.error?.statusCode === 500">
+                <h1 class="display-1 text-center">{{ props.error.statusCode }}</h1>
+                <p class="text-center mt-10">Internal server error</p>
+            </div>
+        </div>
+    </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+    error: Object as () => NuxtError,
+})
+
+onMounted(() => {
+    const statusCode = props.error?.statusCode || 400
+
+    if (statusCode >= 400) {
+        setTimeout(() => {
+            reloadNuxtApp({
+                path: '/',
+                ttl: 1000,
+            })
+        }, 3000)
+    }
+})
+</script>

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
     <main>
-        <NuxtPage />
+        <slot />
         <div
             v-if="indexStore.showAlert"
             class="alert show alert-dismissible fade media-alert position-fixed"
@@ -8,7 +8,7 @@
             role="alert"
         >
             {{ indexStore.alertMsg }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="indexStore.showAlert=false"></button>
         </div>
     </main>
 </template>

package.json

@@ -24,12 +24,12 @@
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "mpegts.js": "^1.7.3",
-    "nuxt": "3.10.1",
+    "nuxt": "3.10.2",
     "pinia": "^2.1.7",
     "sortablejs-vue3": "^1.2.11",
     "splitpanes": "^3.1.5",
     "video.js": "^8.10.0",
-    "vue": "^3.4.18",
+    "vue": "^3.4.19",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
@@ -42,7 +42,7 @@
     "eslint-plugin-nuxt": "^4.0.0",
     "postcss": "^8.4.35",
     "postcss-loader": "^8.1.0",
-    "sass": "^1.70.0",
+    "sass": "^1.71.0",
     "sass-loader": "^14.1.0"
   }
 }