Filament•17mo ago

Importing Filament Custom Pages

I'm building out a custom dashboard and have not been able to include one Filament custom page inside another (using @livewire() or <livewire /> ). It says "unable to find component". Is this expected? I can import other Filament components under the App\Filament namespace, but nothing that lives in Pages. Thanks.

5 Replies

Patrick Boivin•17mo ago

I don't think you can embed a full page inside of another page... can you share some code showing what you're trying to do?

hgmsOP•17mo ago

Sure thing. Thanks for the help. So if I mock up a custom "Home" page with another custom "SubSectionOne" page and try to include SubSectionOne inside the blade view for Home, I get the component not found error. If I move SubSectionOne to the parent Filament folder, it works. This does not work:

<x-filament::page>
    <livewire:filament.pages.sub-section-one />
</x-filament::page>

<x-filament::page>
    <livewire:filament.pages.sub-section-one />
</x-filament::page>

but this does:

<x-filament::page>
    <livewire:filament.sub-section-one />
</x-filament::page>

<x-filament::page>
    <livewire:filament.sub-section-one />
</x-filament::page>

// sub-section-one.blade.php

<div>Custom Content</div>

<div>Custom Content</div>

This might be an indication that I'm doing something "wrong". Essentially, I have different livewire components I'd like to manage separately on a single dashboard. To keep things organized, I thought I'd create Filament custom pages so they're all in the same folder, instead of spread across Filament and Livewire.

hgmsOP•17mo ago

The first screen cap structure is not working (when SubSectionOne is within the Pages folder) but the third screen cap does work (moving it outside Pages).

Patrick Boivin•17mo ago

Hey @the_hgms, thanks for providing more info! So personally, I still think the metal model of a "page within a page" is not quite right, but I think I get what you are trying to do. Basically, this is all for organization, right? If you have reusable "page sections", you want them to live beside the page classes instead of away in the livewire folder. My idea for you is to introduce a "sections" folder instead, so you would have the following structure:

app/
    Filament/
        Pages/
            Home.php
        Sections/
            MySection.php
...

resources/
    views/
        filament/
            pages/
                home.blade.php
            sections/
                my-section.blade.php
...

app/
    Filament/
        Pages/
            Home.php
        Sections/
            MySection.php
...

resources/
    views/
        filament/
            pages/
                home.blade.php
            sections/
                my-section.blade.php
...

Then, instead of a page, make MySection a plain Livewire component:

class MySection extends Component
{
    public function render()
    {
        return view('filament.sections.my-section');
    }
}

class MySection extends Component
{
    public function render()
    {
        return view('filament.sections.my-section');
    }
}

And finally in your AppServiceProvider, you'll have to register the sections individually:

    public function register()
    {
        Livewire::component("filament.sections.my-section", MySection::class);
    }

    public function register()
    {
        Livewire::component("filament.sections.my-section", MySection::class);
    }

Let me know if this works for you, I'm using it extensively in my current project.

hgmsOP•17mo ago

Thanks, @pboivin! This is very nice and I will use this strategy. Really appreciate the feedback. I am able to use the Sections components without registering them in the service provider. I think this is because of the livewire config from config/filament.php

....

'livewire' => [
        'namespace' => 'App\\Filament',
        'path' => app_path('Filament'),
    ],

....

....

'livewire' => [
        'namespace' => 'App\\Filament',
        'path' => app_path('Filament'),
    ],

....

Gaming

Programming

Importing Filament Custom Pages