Flashing Banner Messages in Your Laravel Jetstream and Livewire Applications

Table of Contents

This article assumes you've already got a Laravel Jetstream application setup and that you are using the Livewire stack. If you haven't, read the official documentation on how to get started.

Jetstream comes jam-packed with lots of goodies. One of those goodies is an <x-jet-banner> component. If you're using the default layouts.app layout that comes with Jetstream, you might have already seen this. It can be found at the very start of the <body> tag:

If you're using a different layout file, go ahead and include this Blade component somewhere in your markup.

A brief look at the component itself shows that it's powered by Alpine and support 2 different styles out of the box. A success style, as well as an error/danger style.

This is perfect for 99% of applications since you either want to say something is good or bad.

You might also notice that there is an @props declaration at the top of the component file:

This is where the component gets all of the information for what type of banner should be shown as well as the message.

Since we know the component is looking for the message and style in the session, all we need to do is flash these pieces of information to the session.

In a Livewire component, you might use the session() helper or go through the request() helper instead.

Add this method to your component and use it yourself!

If you want to re-use this throughout multiple components, you might wish to extract the method into a trait that can be used on your components.

Here's the one I use.

For these sort of traits, I don't put them inside of the App/Http/Livewire folder because they're not reliant on Livewire specific methods. I could add this to anything in my application and it would still do the same thing.

Now you can use this trait in your Livewire component instead:

Enjoyed this post or found it useful? Please consider sharing it on Twitter.