Quick Tip: Laravel Jetstream Banners

Tutorials

April 9th, 2021

jetstream-banners-leader.png

If you're using Laravel Jetstream with Livewire or Intertia.js, the scaffolding includes a banner notification component in the app layout that you can utilize from your own views/Livewire/Inertia.js components. Notifications can be dispatched using Laravel's session.

1<?php
2
3// ...
4
5class ExampleComponent extends Component
6{
7 public function submit()
8 {
9 // Do some stuff...
10
11 session()->flash('flash.banner', 'Yay for free components!');
12 session()->flash('flash.bannerStyle', 'success');
13
14 return $this->redirect('/');
15 }
16}

The banners support 'success' and 'danger' styles out of the box. If you'd like to customize the look of the component, run php artisan vendor:publish --tag=jetstream-views to publish the Jetstream views. Then, edit the banner.blade.php file if you're using Livewire:

1resources/views/vendor/jetstream/components/banner.blade.php

or the resources/js/Jetstream/Banner.vue file if you're using Inertia.js!

Filed in:

Jason Beggs

TALL stack (Tailwind CSS, Alpine.js, Laravel, and Livewire) consultant and owner of roasted.dev.