Flash message

Vale, esto es importante:
.
Al parecer en la nueva actualización de Laravel (o Inertia), ya no se puede acceder directamente a $page.flash porque sino dará error (y de hecho no te mostrará nada y si inspeccionas te mostrará todo en blanco porque te dice que no puede acceder a la propiedad status de undefined).
.
Para solucionar esto, ahora deben acceder primero a una propiedad llamada props, algo así:

<div v-if="$page.props.flash.status" class="bg-blue-500 text-white text-sm font-bold p-4">
    <p>{{ $page.props.flash.status }}</p>
</div>

Flash message

Para crear un canal de comunicación entre PHP y Vue.js, tenemos que ir a App/Providers al archivo AppServiceProvider.php. Y dentro del método público boot, escribimos:

Inertia::share('flash', function () {
     return ['status' => Session::get('status')];
});

Con esto, ahora en las redirección al terminar de ejecutarse un método, podemos enviar el estatus y un mensaje. Así:

return redirect()->route('notes.index')->with('status', '🔥 Nota eliminada');

Después en el archivo AppLayout.vue creamos una condicional en Vue que reciba este mensaje.

<div v-if="$page.props.flash.status" class="bg-blue-500 text-white text-sm font-bold p-4">
    <p>{{ $page.props.flash.status }}</p>
</div>

Con el siguiente código les muestra los errores, por ejemplo aquellos generados por validate desde el controlador.
Es interesante todo lo que se puede obtener con $page, aquí incluso muestra los datos del usuario que se ha logeado.
Utilizo el método Object.key().length y no length directamente ya que se trata de un objeto, no de un arreglo.

<div v-if="Object.keys($page.props.errors).length != 0" class="bg-red-500 text-white text-sm font-bold p-4">
           <ul>
                  <li v-for="error in $page.props.errors" :key="error">
                       {{ error }}
                 </li>
          </ul>
</div>

AppLayout.vue si quieren darle estilos diferentes dependiendo de la acción realizada pueden usar este código que hice en mi proyecto, le da un ‘toque’ diferente a la UX

<main>
                <div v-if="$page.props.flash.status == 'Nota creada'" class="bg-green-500 text-white text-sm font-bold p-4">
                    <p>{{ $page.props.flash.status }}</p>
                </div>
                <div v-if="$page.props.flash.status == 'Nota actualizada'" class="bg-blue-500 text-white text-sm font-bold p-4">
                    <p>{{ $page.props.flash.status }}</p>
                </div>
                <div v-if="$page.props.flash.status == 'Nota eliminada'" class="bg-red-500 text-white text-sm font-bold p-4">
                    <p>{{ $page.props.flash.status }}</p>
                </div>
                <slot></slot>
            </main>```

error: Vue warn]: Error in render: “TypeError: Cannot read property ‘status’ of undefined”

found in

—> <AppLayout> at resources/js/Layouts/AppLayout.vue
<Index> at resources/js/Pages/Notes/Index.vue
<Inertia>
<Root>

Si quisieras darle al usuario poder de cerrar el mensaje flash, puedes hacerlo de esta forma 👍

<span @click="$page.props.flash.message = false">
       Cerrar
 </span>

Tambien quiero dejar este aporte, si desean agregar un mensaje de error en la validación de sus formularios, puede sagregar esta linea según el key que esten usando 👍

<div v-if="$page.props.errors.excerpt">{{ $page.props.errors.excerpt }}</div>

muchachos gracias por sus aportes…