Laravel Jetstream

Laravel Jetstream Banner Quick Guide

An application starter kit for Laravel is known as Laravel Jetstream and it helps to build Laravel apps quickly. This beautifully designed application starter kit provides the superior starting point for your next Laravel projects. You can implement out of the box authentication, API, and more with Jetstream. 

It generally contains the following components:

  • Login and registration functionality
  • Session management
  • Two-factor authentication
  • Email verification
  • API support via Laravel Sanctum
  • Optional team management features

To replace the legacy Laravel authentication UI of the previous Laravel versions, Laravel Jetstream is one of the best options.

Laravel Jetstream kit is free and open-source and hence you can install it easily. Make sure to hire dedicated Laravel developers for the same.  

How to install Laravel Jetstream?

There are a couple of ways of installing Laravel Jetstream and you can choose any one between them. It can be installed either using composer or the Laravel installer.

Using Laravel installer for installing Jetstream 

If you have the most up-to-date version of the Laravel installer in hand then you should use ‘—jet’ flag for installing a new Laravel Jetstream project:

laravel new project-name –jet

After that, you should run your migrations as usual:

php artisan migrate

Using composer for installing Jetstream 

If you are willing to use composer then you should run the following command inside your Laravel directory similar to any other package:

composer require laravel/jetstream

Note: For running the above command successfully, you should install Laravel 8.

 

Then, you have to run artisan jetstream:install and specify the stack that you want to use:

While using Livewire with Blade run the below command;

php artisan jetstream:install livewire

Whereas if you want to use Inertia with Vue run this command;

php artisan jetstream:install inertia

To enable Laravel Jetstream team support, you can add the –teams flag.

Now, you need to execute;

npm install && npm run dev

The above command will lead to creating your assets.

At last, run your migrations:

php artisan migrate

Now, a quick tip on Laravel Jetstream Banners 

See also  Top 5 Solar Panel Installation Mistakes and How to Avoid Them

Jetstream makes use of Tailwind CSS where you have to choose between Livewire and Inertia.

While using Laravel Jetstream with Livewire or Intertia.js, the scaffolding incorporates a banner notification component in the app layout that needs to be utilized from your own views/Livewire/Inertia.js components. Notifications can be sent off using Laravel’s session as given.

<?php

// …

class ExampleComponent extends Component

{

    public function submit() 

    {

        // Do some stuff…

        session()->flash(‘flash.banner’, ‘Yay for free components!’);

        session()->flash(‘flash.bannerStyle’, ‘success’);

        return $this->redirect(‘/’);

    }

}

The banners are compatible with ‘success’ and ‘danger’ styles out of the box. If you prefer to customize the look of the component, you need to run php artisan vendor:publish –tag=jetstream-views for publishing the Jetstream views. Then, edit the banner.blade.php file while using Livewire:

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

or while using Inertia.js, make use of the resources/js/Jetstream/Banner.vue file 

Flashing Banner messages in your Laravel Jetstream and Livewire applications:

After getting a Laravel Jetstream application installed and ensuring the use of Livewire stack, you can make use of the following commands to flash the banner messages in Laravel Jetstream. If you need any further help for setup, you can refer to the official documentation on how to get started.

The <x-jet-banner> component

Jetstream comes fully packed with lots of rewards and the above mentioned ‘<x-jet-banner> component’ is one of them. While using the default ‘layouts.app’ layout that comes with Jetstream, you must have seen this by now at the very start of the <body> tag:

<body class=”font-sans antialiased”>

    <x-jet-banner />

For using a different layout file, you need to incorporate this Blade component somewhere in your markup.

If you concisely look at the component, you will see that it’s powered by Alpine and supports 2 different styles out of the box namely a success style and an error/danger style. This works fine for 99% of applications as you will surely say something is good or it is bad.

There is also @props declaration at the top of the component file:

@props([‘style’ => session(‘flash.bannerStyle’, ‘success’), ‘message’ => session(‘flash.banner’)])

From here, the component gets all the information about the type of banner and the message that needs to be shown.

How to flash a message?

See also  Google nest WIFI review

The component looks for the message and style in the session so flash the pieces of information to the session.

In a Livewire component, you can either use the ‘session()’ helper or the ‘request()’ helper instead.

public function banner(string $message, string $style = ‘success’)

{
request()->session()->flash(‘flash.banner’, $message);

    request()->session()->flash(‘flash.bannerStyle’, $style);
}

You can add this method to your component for using it by yourself.

public function save()

{
// Some save logic goes here, I guess.

   $this->banner(‘Successfully saved!’);
}

A reusable attribute

To re-use this for several components, extracting the method into a trait that can be used on your components needs to be applied.

Here is one example;

namespace App\Support\Concerns;

trait InteractsWithBanner
{
public function banner(string $message, string $style = ‘success’)
{
request()->session()->flash(‘flash.banner’, $message);
  request()->session()->flash(‘flash.bannerStyle’, $style);
}
}

Such traits may not be required to put inside of the ‘App/Http/Livewire’ folder as they are not dependent on Livewire specific methods. I could add this to anything in my application and it would still do the same thing.

To use this trait in your Livewire component;

use App\Support\Concerns\InteractsWithBanner;

class SaveForm extends Component

{
use InteractsWithBanner;
}

Leave a Comment

Your email address will not be published. Required fields are marked *