Flash Messages in Jestream+InertiaJS

Have you ever wondered how to use Flash Messages with the Laravel+Jetstream+Inertia Stack? Turns out, not the usual way.

In the official Laravel Docs, you'll find this:

// This dosn't work
$request->session()->flash('status', 'Task was successful!');

Jetstream has a build-in 'Banner' Component that you'll find under resources/js/Jetstream/Banner.vue

Check out these two lines:

const style = computed(() => usePage().props.value.jetstream.flash?.bannerStyle || 'success');
const message = computed(() => usePage().props.value.jetstream.flash?.banner || '');

It's using flash.bannerStyle and flash.banner.

Use it like this:

// Some Controller with some Action
// ...
$request->session()->flash('flash.banner', 'Task was successful!');
$request->session()->flash('flash.bannerStyle', 'success');

return back(303);