Inertia: Flash messaging in an Inertia app

[dvanscott]

In the process of playing around with Inertia, I ran into the question of how best to handle flash messaging. In a traditional server-side rendered app, I would usually just flash the data I want directly to the session from the controller and then on page reload, that data would be available and would trigger the message to appear. Given that Inertia apps don't have that page reload though, I found myself scratching my head this weekend trying to get flash messages working.

One of the things I tried after that was creating a plugin that would manage my alerts for me. The idea was in my submit's then callback, before I replace the URL, I would flash any message to my plugin and then move over to the new page.

then (() => {
    this.$alert.success('User was successfully created.');

    Inertia.replace(route('users.index'));
})

Unfortunately, this doesn't work because the alert manager is inside of my layout file, so that whole thing gets replaced with the new component when Inertia.replace is called.

I wanted to see what people thought would be a good way to tackle the flash messaging issue in Inertia apps. Due to how fast the whole thing is, it can be a little jarring to move back to an index page and not have any confirmation that something was successfully added, especially on a page where there may be a lot of data.

Would love to get a conversation rolling with a few folks on this one!

[dvanscott]

I'm not saying that Inertia _should_ handle this as part of the core, but _if_ it was going to, I wonder if something as simple as this might work:

Inertia.flash({
    alert: {
        message: 'My flash message',
        level: 'success',
    }
})
.replace(route('users.index'))

Again, just trying to start some conversations around this sort of thing and what some best practices might be.

[thoresuenert]

I showcased an untested idea, but it should work:

https://gist.github.com/thoresuenert/4e0318991582bcc8696c2066374f6afe

https://gist.github.com/thoresuenert/b3305392b812e67a53f82709cd7e4fb4

the idea:

the flash component never gets destroyed so it will stay in place during inertia page loads.

[dvanscott]

Ah, very nice idea @thoresuenert. I'm gonna give that a try on my branch.

[dvanscott]

@thoresuenert This worked brilliantly, so thank you for the suggestion!

[thoresuenert]

@dvanscott thanks for your feedback. I will blog about it in detail.

[dvanscott]

@thoresuenert Definitely post a link to the article when you do blog about it. Would love to read it.

[sebastiandedeyne]

Alternatively, you could use Inertia::share to always pass down potential flash messages to the page that gets rendered, that way flash messages work for both inertia page changes and full page refreshes.

[reinink]

I recently did this in an Laravel app, using the new $page property (which replaced the provide/inject stuff), and it's really easy. Here's some example code:

// AppServiceProvider.php

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

// UsersController.php

public function store()
{
    $user = User::create(
        Request::validate([
            'first_name' => ['required', 'max:50'],
            'last_name' => ['required', 'max:50'],
            // ...
        ])
    );

    return Redirect::route('users.edit', $user)->with('success', 'User created.');
}

<!-- Layout.vue -->

<div v-if="$page.flash.success" class="green">
  {{ $page.flash.success }}
</div>
<div v-if="$page.flash.error" class="red">
  {{ $page.flash.error }}
</div>

[reinink]

Just an update here folks. I just updated the PingCRM demo app to include flash messages. See that change here: https://github.com/inertiajs/pingcrm/commit/f61d969aa59fc89255f26f55e4dbe5f6eea1eefb

[Larsklopstra]

Would it be possible to hide the flash message after a certain amount of time? I'd love to see an example

[reinink]

@Larsklopstra Yes, for sure. Simply use a setTimeout() along with a message visibility data attribute. This is more of a Vue.js problem than an Inertia.js problem.

[UXandre]

Hi @reinink - thanks for building the amazing package first of all. I've been trying to get the errors message working with no luck. I followed through your doc and tried to validate the request like this:

Request::validate([
          'email' => ['required', 'max:50', 'email'],
        ]);

But then face the issue:
Cannot unbind $this of closure using $this

Been struggling for a while and can't find anything online about this. Do you have any idea how to fix this?

Thank you!

[UXandre]

Hi @reinink - thanks for building the amazing package first of all. I've been trying to get the errors message working with no luck. I followed through your doc and tried to validate the request like this:

Request::validate([
          'email' => ['required', 'max:50', 'email'],
        ]);

But then face the issue:
Cannot unbind $this of closure using $this

Been struggling for a while and can't find anything online about this. Do you have any idea how to fix this?

Thank you!

I used $request->validate() instead and problem sorted!