9

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
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
operator
  • 95
  • 1
  • 6

4 Answers4

17

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>
Saravanakumar Arumugam
  • 503
  • 3
  • 9
  • 2
    This worked well, but the blade location is important. I had to place it in resources/views/vendor/jetstream/components in order for it to be recognized. – bfuzze Feb 28 '21 at 20:05
  • Thanks for this answer. I don't get why this has to be done manually. Is there some update in planning? – AlexioVay Jul 20 '21 at 12:57
  • 1
    They should include this part on the jetstream's documentation IMO – Mario Ariyanto Jul 29 '22 at 07:22
14

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 :)

Isaac Pontes
  • 164
  • 1
  • 2
  • 1
    Thanks for your help! It worked for me but I've no idea why it's not possible to use the Jetstream Blade instead of a "normal" Blade component. – operator Nov 27 '20 at 18:59
  • In a tutorial, he claims you can add a new component by creating a new component blade file inside the `views/components` folder, but I get that error: `Unable to locate a class or view for component`. Do I really have to execute `make:component`. Can it simply get done by adding a new blade file, as @operator is asking for? – Pathros Dec 15 '20 at 03:26
  • 1
    Kind of wish I had not down voted this (sorry), but I don't think it answers the question pricisely, which seems specific to jetstream. I think the answer submitted by @Saravanakumar is more accurate. – bfuzze Feb 28 '21 at 20:03
0

I think this post helps out some people in 2023 upwards since there have been some changes with using PHP 8.1+ and Laravel 10 now.

@Isaac Pontes made a really good post 3 years ago to add components manually. This actually should be in the Jetstream official documentation but it seems it's not maintained really well which makes Jetstream really a small niche and hard to find good solutions.

However, please see this code to solve the same issue OP had:

class JetstreamServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        $this->registerComponent('label');
        $this->registerComponent('form-section');
        $this->registerComponent('action-message');
        $this->registerComponent('section-title');
        $this->registerComponent('confirms-password');
        $this->registerComponent('input-error');
    }

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

With this you will register JetStream components manually and directly point to the vendor/jetstream/components path which should be in your resources folder.

In register() you can add all missing components each page view manually. I am mainly building my components myself but I still have some exceptions where I use JetStream components. That will help anyone else that goes the same route.

AlexioVay
  • 4,338
  • 2
  • 31
  • 49
-3

I am not sure whether it's the correct or intended way to add new custom x-jet components here as this method may not survive an update, but you can register new components in this file:

vendor/laravel/jetstream/src/JetstreamServiceProvider.php.

Add, $this->registerComponent('subform'); to the configureComponents method, and then call it with an <x-jet-subform> tag

endroo
  • 475
  • 4
  • 6