fixes: regenerated flash messages, page props

Author: connorabbas

resources/js/components/FlashMessages.vue

@@ -1,63 +1,72 @@
 <script setup>
+import { ref, onUnmounted } from 'vue';
+import { usePage, router } 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++));
 </script>
 
 <template>
-    <div class="m-0">
+    <div
+        class="m-0"
+        :key="requestsKey"
+    >
         <Message
-            v-if="$page.props.flash.success"
+            v-if="page.props.flash.success"
             class="mb-6"
             severity="success"
             closable
         >
             <template #icon>
                 <Check />
             </template>
-            {{ $page.props.flash.success }}
+            {{ page.props.flash.success }}
         </Message>
         <Message
-            v-if="$page.props.flash.info"
+            v-if="page.props.flash.info"
             class="mb-6"
             severity="info"
             closable
         >
             <template #icon>
                 <Info />
             </template>
-            {{ $page.props.flash.info }}
+            {{ page.props.flash.info }}
         </Message>
         <Message
-            v-if="$page.props.flash.warn"
+            v-if="page.props.flash.warn"
             class="mb-6"
             severity="warn"
             closable
         >
             <template #icon>
                 <TriangleAlert />
             </template>
-            {{ $page.props.flash.warn }}
+            {{ page.props.flash.warn }}
         </Message>
         <Message
-            v-if="$page.props.flash.error"
+            v-if="page.props.flash.error"
             class="mb-6"
             severity="error"
             closable
         >
             <template #icon>
                 <CircleAlert />
             </template>
-            {{ $page.props.flash.error }}
+            {{ page.props.flash.error }}
         </Message>
         <Message
-            v-if="$page.props.flash.message"
+            v-if="page.props.flash.message"
             class="mb-6"
             severity="secondary"
             closable
         >
             <template #icon>
                 <Megaphone />
             </template>
-            {{ $page.props.flash.message }}
+            {{ page.props.flash.message }}
         </Message>
     </div>
 </template>

resources/js/pages/auth/Login.vue

@@ -3,7 +3,7 @@ import { useTemplateRef, onMounted } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import GuestAuthLayout from '@/layouts/GuestAuthLayout.vue';
 
-defineProps({
+const props = defineProps({
     canResetPassword: {
         type: Boolean,
     },
@@ -36,15 +36,15 @@ onMounted(() => {
         <InertiaHead title="Log in" />
 
         <template
-            v-if="status"
+            v-if="props.status"
             #message
         >
             <Message
                 severity="success"
                 :closable="false"
                 class="shadow-sm"
             >
-                {{ status }}
+                {{ props.status }}
             </Message>
         </template>
 
@@ -90,7 +90,7 @@ onMounted(() => {
                 <div class="flex items-center justify-between">
                     <label for="password">Password</label>
                     <InertiaLink
-                        v-if="canResetPassword"
+                        v-if="props.canResetPassword"
                         :href="route('password.request')"
                     >
                         <Button