Filament layout to livewire component

hi, i've a Livewire component like this:

class InviteRegister extends Component implements HasForms
{
    use InteractsWithForms;

    public $token;

    public function mount($token)
    {
        $this->token = $token;
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->email()
                    ->required()
                    ->autocomplete(),
            ]);
    }
    

    public function render()
    {
        return view('livewire.invite-register'); 

    }
}

class InviteRegister extends Component implements HasForms
{
    use InteractsWithForms;

    public $token;

    public function mount($token)
    {
        $this->token = $token;
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('email')
                    ->email()
                    ->required()
                    ->autocomplete(),
            ]);
    }
    

    public function render()
    {
        return view('livewire.invite-register'); 

    }
}

and iside livewire.invite-register i want to set a x-filament-panels layout.base

<div>

    Do your work, then step back. {{ $token }}

    {{ $this->form }}
    
</div>

<div>

    Do your work, then step back. {{ $token }}

    {{ $this->form }}
    
</div>

How can i do? Thanks

Solution:

I understood perfectly, in this case you need to manually style the page, you'll need to install tailwind globally in the project (filament uses tailwind but it's style is locked inside the filament ecosystem) and build it from scratch. Imagine that you dont have filament installed.

Jump to solution

19 Replies

Mohamed Ayaou•3w ago

try something like: <x-filament::panels-page> this is not the right one but this how to use all of the filament blade views and components

Mohamed Ayaou•3w ago

read this for more details: https://filamentphp.com/docs/3.x/support/blade-components/overview

Overview - Core Concepts - Filament

Dream•3w ago

Hello, @ocram82 I can help you, please DM

ocram82OP•3w ago

i try both:

<x-filament-panels::layout.base>
....
</x-filament-panels::layout.base>

<x-filament-panels::layout.base>
....
</x-filament-panels::layout.base>

with error: is "Call to a member function getRenderHookScopes() on null" and

<x-filament-panels::page>
....
</x-filament-panels::page>

<x-filament-panels::page>
....
</x-filament-panels::page>

with error: Method App\Livewire\InviteRegister::getCachedSubNavigation does not exist.

Mohamed Ayaou•3w ago

Are you rendering your custom view inside a filament panel or outside panels builder?

ocram82OP•3w ago

outside

Bruno Pereira•3w ago

probably because the component is not extending the Page class.

ocram82OP•3w ago

i've not Page class here. I 've a controller and a route bindend in web.php like this: Route::get('/invites/register/{token}', [InviteController::class, 'show'])->name('invites.register'); in the show method of controller i do this:

    function show($token)
    {
        return view('invite.show', compact('token'));
    }

    function show($token)
    {
        return view('invite.show', compact('token'));
    }

and inside invite.show

<livewire:invite-register :token="$token" />

<livewire:invite-register :token="$token" />

when i navigate the link it all works but i can't use a layout because i've the errors before

Bruno Pereira•3w ago

I know, but you gotta keep in mind that FIlament uses livewire and not the other way around. So you have a standalone livewire component outside of the filament ecosystem. You can use the forms, actions, tables packages because you can import them, but the layouts I think its confined to the filament

ocram82OP•3w ago

ok, thanks, so what's the proper way to build a landing page using Filament layout?

Bruno Pereira•3w ago

create a custom page

ocram82OP•3w ago

that page should be outside the admin login

ocram82OP•3w ago

do you mean this https://filamentphp.com/docs/3.x/panels/resources/custom-pages ? But i need that page outside the admin panel

Custom pages - Panel Builder - Filament

Bruno Pereira•3w ago

Then you have to use css+tailwind. Create a custom theme

ocram82OP•3w ago

ok i'll try tomorrow and i give a feedback. Thanks a lot for now

Bruno Pereira•3w ago

no prob

ocram82OP•3w ago

hi Bruno! i've just create a Custom Page but it can be possibile only inside a panel. I want this page outside the login. I need this like a landing page, a register page. Not under login protection. I don't know if i'm explaing well sorry

Solution

Bruno Pereira•3w ago

If you want some ui kits to ease the process you can check this link https://www.tailwindawesome.com/?price=free&type=kit

Tailwind Awesome

A curated directory of the best Tailwind templates and UI kits to kickstart your next design.

Gaming

Programming

Filament layout to livewire component

Did you find this page helpful?