Using new Laravel 8 Jetstream components

When switching from Laravel 7 to 8, one of the first things I noticed were the <x-jet-... components used for all of the scaffolding. Since there are probably hundreds of options to build forms and to simplify writing plain HTML tags in your templates, I decided to keep it all in one style and use the <x-jet-... for all of my templates.

Like you can read in the Livewire docs, you can pull the components into your project folder like so.

php artisan vendor:publish --tag=jetstream-views

But there is for example no <x-jet-textarea>, so how do you add new components?

Simply edit the file /app/Providers/JetstreamServiceProvider.php and add the following to the end of the boot() function and below:

        $this->registerComponent('textarea');
    } // <- end of boot()

     protected function registerComponent(string $component)
    {
      Blade::component('jetstream::components.'.$component, 'jet-'.$component);
    }

Now you can create and customize the component file in /resources/views/vendor/jetstream/components/textarea.blade.php .

<x-jet-action-message> <x-jet-action-section> <x-jet-application-logo> <x-jet-application-mark> <x-jet-authentication-card-logo> <x-jet-authentication-card> <x-jet-button> <x-jet-confirmation-modal> <x-jet-confirms-password> <x-jet-danger-button> <x-jet-dialog-modal> <x-jet-dropdown-link> <x-jet-dropdown> <x-jet-form-section> <x-jet-input-error> <x-jet-input> <x-jet-label> <x-jet-modal> <x-jet-nav-link> <x-jet-responsive-nav-link> <x-jet-secondary-button> <x-jet-section-border> <x-jet-section-title> <x-jet-switchable-team> <x-jet-textarea> <x-jet-validation-errors> <x-jet-welcome>

 

This page or post was last modified on 2022-09-15 .