fixes: flash messaging

Author: connorabbas

bootstrap/app.php

@@ -42,7 +42,7 @@
                     ->setStatusCode($response->getStatusCode());
             } elseif ($response->getStatusCode() === 419) {
                 return back()->with([
-                    'flash_message' => 'The page expired, please try again.',
+                    'flash_warn' => 'The page expired, please try again.',
                 ]);
             }
 

resources/js/components/FlashMessages.vue

@@ -1,16 +1,19 @@
 <script setup>
-import { ref, onUnmounted } from 'vue';
-import { usePage, router } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import { usePage } from '@inertiajs/vue3';
 import { Check, Info, TriangleAlert, CircleAlert, Megaphone } from 'lucide-vue-next';
 
 const page = usePage();
-const requestsKey = ref(0);
-onUnmounted(router.on('finish', () => requestsKey.value++));
+const flashed = ref(0);
+
+watch(() => page.props.flash, () => {
+    flashed.value++;
+}, { deep: true });
 </script>
 
 <template>
     <div
-        :key="requestsKey"
+        :key="flashed"
         class="m-0"
     >
         <Message