Laravel 8.15.0/Jetstream - How to register new blades x-jet-newblade?

Question

I am just doing my very first steps with Laravel 8 and found a problem that I can not solve.

/var/www/html/laravel/resources/views/dashboard.blade.php:

    <div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <x-jet-welcome />
        </div>

If i create a new blade in the same directory (f.e. the form.blade.php) with the same code as above but with <x-jet-subform/> instead of <x-jet-welcome> it should normally redirect to the subform.blade.php which is located under var/www/html/laravel/resources/views/vendor/jetstream/components/subform.blade.php

But if I try to get to that page (after setting a Route at web.php) it says

InvalidArgumentException
Unable to locate a class or view for component [jet-subform].

So I think it's necessary to "register" new blades but I found no way to do that...

The view is already published with

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

Answer 1

You can register your jetstream blade components in App\Providers\JetstreamServiceProvider.php located in app\Providers folder.

Add the following helper function to the file:

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

Then use the following snippet in register function to register your jetstream blade components:

public function register() {
    $this->registerComponent('subform');
}

Now you can use your custom jetstream component:

<x-jet-subform>

Answer 2

I was dealing with the same problem here and found your question unanswered. The solution I found was to create my own new Blade component. You can do that using:

$ php artisan make:component MyComponent

This will create two new files /resources/views/components/my-component.blade.php and /app/View/Components/MyComponent.php. Now you just need to build your component on that blade file and reference it using the x-tag like this: <x-my-component></x-my-component>

This is how the blade component code should look like

<button {{ $attributes->merge(['type' => 'button', 'class' => 'some-classes']) }}> {{ $slot }} </button>

Hope it helps. Greetings from Brazil :)