Flash Messages in Laravel + Inertia

Flash Message kya hota hai?

Flash message ek temporary message hota hai jo:

• ek request ke baad show hota hai
• next page pe display hota hai
• automatically remove ho jata hai

 Example:

• "User created successfully ✅"
• "Login failed ❌"
• "Profile updated 🎉"

---

Real Life Example

Socho tumne user register kiya:

User created successfully!

Tum chahte ho:

• redirect ho dashboard pe
• waha success message show ho

 Ye hi flash message ka use case hai

---

Step-by-Step Implementation

---

Step 1: Backend me Flash Message bhejna

public function register(RegisterRequest $request)
{
    $user = $this->authService->register($request->validated());

    return to_route('dashboard')
        ->with('message', 'User created successfully!');
}

with() method:

• session me data store karta hai
• next request tak hi rehta hai

---

Step 2: Inertia Middleware me Share karna

app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'flash' => [
            'message' => $request->session()->get('message'),
        ],
    ]);
}

 Ye step bahut important hai

• Laravel → Vue tak data pass karta hai

---

Step 3: Vue (Frontend) me Access karna

import { usePage } from '@inertiajs/vue3'

const page = usePage()

Now use:

page.props.flash.message

---

Step 4: UI me Show karna

<template>
  <div v-if="$page.props.flash.message" class="bg-green-500 text-white p-3">
    {{ $page.props.flash.message }}
  </div>
</template>

---

Types of Flash Messages

Professional apps me sirf message nahi hota 

Multi-type Flash

Backend:

return redirect()->back()->with([
    'success' => 'Data saved successfully!',
    'error' => 'Something went wrong!',
]);

Middleware:

'flash' => [
    'success' => $request->session()->get('success'),
    'error' => $request->session()->get('error'),
],

Vue:

<div v-if="$page.props.flash.success" class="bg-green-500">
  {{ $page.props.flash.success }}
</div>

<div v-if="$page.props.flash.error" class="bg-red-500">
  {{ $page.props.flash.error }}
</div>

---

Auto Hide (Pro Feature)

<script setup>
import { ref, watch } from 'vue'
import { usePage } from '@inertiajs/vue3'

const page = usePage()
const show = ref(false)

watch(() => page.props.flash.message, () => {
  show.value = true

  setTimeout(() => {
    show.value = false
  }, 3000)
})
</script>

<template>
  <div v-if="show" class="bg-green-500 text-white p-3">
    {{ page.props.flash.message }}
  </div>
</template>

---

Common Mistakes (IMPORTANT)

Galat:

Inertia::flash(...)

Direct Vue me access bina middleware ke

Session clear hone ke baad message expect karna

---

Best Practice (Production Level)

Ek reusable component bana:

FlashMessage.vue

<script setup>
import { usePage } from '@inertiajs/vue3'

const page = usePage()
</script>

<template>
  <div>
    <div v-if="page.props.flash.success" class="bg-green-500 p-2 text-white">
      {{ page.props.flash.success }}
    </div>

    <div v-if="page.props.flash.error" class="bg-red-500 p-2 text-white">
      {{ page.props.flash.error }}
    </div>
  </div>
</template>

Phir layout me use karo:

<FlashMessage />

---

Summary

Step	Kaam
Backend	with() se message bhejo
Middleware	share() me pass karo
Frontend	usePage() se access
UI	show / toast / alert

---

Pro Tip

Agar tu real app bana raha hai (jaise RentalWheels) 

Use:

• Toast notifications (like SweetAlert / Vue Toastify)
• Auto hide + animation
• Multiple message types

---